辩解内容：中心不起作用

时间：2017-01-14 21:58:11

标签： html css flexbox center

我要做的是将文本（以及将并排或在文本顶部的图像）居中，但命令justify-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 个答案:

答案 0 :(得分：0)

这是因为.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>

答案 1 :(得分：0)

.wrapper，这是您的Flex容器，没有高度设置。添加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>

相关问题
最新问题