justify-content:center doesn't work - Twitter bootstrap

TomaszCzechowski
January 14, 2017
124 views
0 votes
2 Answers

What I’m trying to do is to center the text (and image that will be side by side or on top of the text) but the command justify-content:center doesn’t work for me. It centers horizontally but not vertically. Could you tell me what went wrong? I’m actually a beginner and that’s my first website.

Here’s the code:

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>

Answers

It’s because .wrapper is only as tall as the content inside of it, without a declared height that exceeds the content height. So there is no room for it to vertically center without a height that exceeds the content height. Adding height: 100vh; to .wrapper will force that.

what’s up with the 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>

.wrapper, which is your flex container, doesn’t have a height setting. Add height: 100%; to it and the vertical centering works. However, the parent of .wrapper (i.e. .content) has height: 100vh – if its content grows beyond that, it will be a mess (i.e. overlapping), so you might want to change its height setting to min-height instead of 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>

Please signup or login to give your own answer.

Click here to cancel reply.

justify-content:center doesn't work – Twitter bootstrap

Answers