оправдание-содержание: центр не работает

То, что я пытаюсь сделать, это центрировать текст (и изображение, которое будет рядом или поверх текста), но команда оправдать-content:center не работает для меня. Он центрируется по горизонтали, но не по вертикали. Не могли бы вы сказать мне, что пошло не так? Я на самом деле новичок, и это мой первый сайт.

Вот код:

body {
  font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
  font-size: 3em;
  text-transform:uppercase;

}

h4 {
  font-size: 1.5em;
  color:#9e9e9e;
  }
section {
  width: 100%;
  display: inline-block;
  margin: 0;
  max-width: 960;
  height:100vh;
  vertical-align: middle;
}
#welcome-screen {
  width: 100%;
  display: table;
  margin: 0;
  max-width: none;
  height:100vh;
  background-color:#ebebeb;
  padding:0 7%;
}
.heading {
  display:table-cell;
  vertical-align: middle;
}
.heading-span {
    display: block;
    color: #8e8e8e;
    font-size: 18px;
    margin-top: 0px;
    text-transform:none;
}
.scrolldown-button {
  position: absolute;
  display: table;
  text-align: center;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  width: 48px;
  height: 48px;
  font-size:20px;
}
a {
  color:#000000;
  transition: ease-in-out 0.15s
}
a:hover{
  color:#fbd505;
}
#content {
  width: 100%;
  height:100vh;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
p {
  display:column;
  vertical-align: middle;
  max-width: 960px;
}
.content-heading-span {
    display: block;
    font-size: 32px;
    margin-top: 0px;
    text-transform:uppercase;
    margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">

</head>

<body>
  <section id="welcome-screen">
    <div class="heading">
      <h1><span class="heading-span">Hi! My name is</span>
      <strong>John Doe</strong>
      </h1>
    </div>
    <div class="scrolldown-button">
      <a href="#content"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
    </div>
  </section>
  <section>
  <div id="content">
    <div class="wrapper">
      <p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
      <p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
    </div>
  </div>
</body>
</html>

2 ответа

  1. Это потому.wrapper, что только так высоко, как содержимое внутри него, без объявленной высоты, которая превышает высоту содержимого. Таким образом, нет места для вертикального центра без высоты, которая превышает высоту содержимого. Добавление height: 100vh;к .wrapperбудет силой.

    что случилось с downvotes?

    body {
      font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
    }
    h1 {
      font-size: 3em;
      text-transform:uppercase;
    
    }
    
    h4 {
      font-size: 1.5em;
      color:#9e9e9e;
      }
    section {
      width: 100%;
      display: inline-block;
      margin: 0;
      max-width: 960;
      height:100vh;
      vertical-align: middle;
    }
    #welcome-screen {
      width: 100%;
      display: table;
      margin: 0;
      max-width: none;
      height:100vh;
      background-color:#ebebeb;
      padding:0 7%;
    }
    .heading {
      display:table-cell;
      vertical-align: middle;
    }
    .heading-span {
        display: block;
        color: #8e8e8e;
        font-size: 18px;
        margin-top: 0px;
        text-transform:none;
    }
    .scrolldown-button {
      position: absolute;
      display: table;
      text-align: center;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: 0 auto 0 auto;
      width: 48px;
      height: 48px;
      font-size:20px;
    }
    a {
      color:#000000;
      transition: ease-in-out 0.15s
    }
    a:hover{
      color:#fbd505;
    }
    #content {
      width: 100%;
      height:100vh;
    }
    .wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    p {
      display:column;
      vertical-align: middle;
      max-width: 960px;
    }
    .content-heading-span {
        display: block;
        font-size: 32px;
        margin-top: 0px;
        text-transform:uppercase;
        margin-left:-20px;
    }
    <!DOCTYPE html>
    <html >
    <head>
      <meta charset="UTF-8">
      <title>Test</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
    
    </head>
    
    <body>
      <section id="welcome-screen">
        <div class="heading">
          <h1><span class="heading-span">Hi! My name is</span>
          <strong>John Doe</strong>
          </h1>
        </div>
        <div class="scrolldown-button">
          <a href="#content"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
        </div>
      </section>
      <section>
      <div id="content">
        <div class="wrapper">
          <p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
          <p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
        </div>
      </div>
    </body>
    </html>

  2. .wrapper, который ваш контейнер гибкого трубопровода, не имеет установку высоты. Добавьте height: 100%;к этому и вертикальные центрирующие работы. Тем не менее, родитель .wrapper(т. е. .content) имеет height: 100vh— если его содержимое растет дальше этого, это будет беспорядок (т. е. перекрытие), поэтому вы можете изменить его настройку высоты на min-heightВместо height

    body {
      font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
    }
    h1 {
      font-size: 3em;
      text-transform:uppercase;
    
    }
    
    h4 {
      font-size: 1.5em;
      color:#9e9e9e;
      }
    section {
      width: 100%;
      display: inline-block;
      margin: 0;
      max-width: 960;
      height:100vh;
      vertical-align: middle;
    }
    #welcome-screen {
      width: 100%;
      display: table;
      margin: 0;
      max-width: none;
      height:100vh;
      background-color:#ebebeb;
      padding:0 7%;
    }
    .heading {
      display:table-cell;
      vertical-align: middle;
    }
    .heading-span {
        display: block;
        color: #8e8e8e;
        font-size: 18px;
        margin-top: 0px;
        text-transform:none;
    }
    .scrolldown-button {
      position: absolute;
      display: table;
      text-align: center;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: 0 auto 0 auto;
      width: 48px;
      height: 48px;
      font-size:20px;
    }
    a {
      color:#000000;
      transition: ease-in-out 0.15s
    }
    a:hover{
      color:#fbd505;
    }
    #content {
      width: 100%;
      min-height:100vh;
    }
    .wrapper {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    p {
      display:column;
      vertical-align: middle;
      max-width: 960px;
    }
    .content-heading-span {
        display: block;
        font-size: 32px;
        margin-top: 0px;
        text-transform:uppercase;
        margin-left:-20px;
    }
    <!DOCTYPE html>
    <html >
    <head>
      <meta charset="UTF-8">
      <title>Test</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
    
    </head>
    
    <body>
      <section id="welcome-screen">
        <div class="heading">
          <h1><span class="heading-span">Hi! My name is</span>
          <strong>John Doe</strong>
          </h1>
        </div>
        <div class="scrolldown-button">
          <a href="#content"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
        </div>
      </section>
      <section>
      <div id="content">
        <div class="wrapper">
          <p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
          <p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
        </div>
      </div>
    </body>
    </html>