Vertically centering two divs using CSS

Question

I realize that there are numerous questions about how to do this but all of their solutions seem to be unresponsive to my current situation. I have a banner on the top of a site which has two floated columns in it. The right column contains a nav menu which I feel might be the culprit.

I have set up the following jfiddle: https://jsfiddle.net/Lhd0soL5/1/

.container {
  max-width: 940px;
  margin: 0 auto;
  margin-top: 0px;
  padding-top: 0px;
  box-sizing: border-box;
  position: relative;
}



.high {
  background-color: #FFF;
}

.high .left-col {
  width: 33%;
  float: left;
  height: auto;
  padding: 20px 0px;
}

.high .left-col p {
  font-size: 140%;
}

.high .right-col {
  width: 67%;
  float: right;
  height: auto;
  top: 50%;
  bottom: 50%;
}


.site-nav {
  float: right;
}

.site-nav li {
  list-style: none;
  float: left;
  border-right: 1.5px solid;
}

.site-nav li:last-child {
  border: none;
}

.site-nav ul {
  -webkit-padding-start: 0px;
}

.site-nav a {
  display: block;
  text-decoration: none;
  padding: 5px 20px;
}

/* This is the clear fix method */
.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}

<div class="high group">
  <div class="container">
    <div class="left-col">
      <p>Company Name</p>
    </div>
    <aside class="right-col">
      <nav class="site-nav">
        <ul class="group">
          <li><a href="draft1-1.html">Home</a></li>
          <li><a href="contact.html" class="last">Contact Us</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#methodology">Methodology</a></li>
          <li><a href="#">Products</a></li>
        </ul>
      </nav>
    </aside>
  </div>
</div>

Thank you!

score 1 · Answer 1 · answered Feb 06 '16 at 22:43

You can do this with display: table on the parent element, and then display: table-cell and vertical-align: middle on each of the 2 children.

This implementation does not use the float property.

fiddle

Like this:

/* line 45, ../scss/screen1-2.scss */
.container {
  max-width: 940px;
  margin: 0 auto;
  margin-top: 0px;
  padding-top: 0px;
  box-sizing: border-box;
  position: relative;
  display: table;
}


/* line 90, ../scss/screen1-2.scss */
.high {
  background-color: #FFF;
}
/* line 92, ../scss/screen1-2.scss */
.high .left-col {
  width: 30%;
  display: table-cell;
  vertical-align: middle;
  padding: 20px 0px;
}
/* line 95, ../scss/screen1-2.scss */
.high .left-col p {
  font-size: 140%;
}
/* line 99, ../scss/screen1-2.scss */
.high .right-col {
  width: 70%;
  display: table-cell;
  vertical-align: middle;
  top: 50%;
  bottom: 50%;
}

/* line 108, ../scss/screen1-2.scss */
.site-nav {
  float: right;
}
/* line 110, ../scss/screen1-2.scss */
.site-nav li {
  list-style: none;
  float: left;
  border-right: 1.5px solid;
}
/* line 116, ../scss/screen1-2.scss */
.site-nav li:last-child {
  border: none;
}
/* line 120, ../scss/screen1-2.scss */
.site-nav ul {
  -webkit-padding-start: 0px;
}
/* line 124, ../scss/screen1-2.scss */
.site-nav a {
  display: block;
  text-decoration: none;
  padding: 5px 20px;
}

/* This is the clear fix method */
/* line 410, ../scss/screen1-2.scss */
.group:before,
.group:after {
  content: "";
  display: table;
}

/* line 415, ../scss/screen1-2.scss */
.group:after {
  clear: both;
}

/* line 419, ../scss/screen1-2.scss */
.group {
  zoom: 1;
}

<div class="high group">
  <div class="container">
    <div class="left-col">
      <p>Company Name</p>
    </div>
    <aside class="right-col">
      <nav class="site-nav">
        <ul class="group">
          <li><a href="draft1-1.html">Home</a></li>
          <li><a href="contact.html" class="last">Contact Us</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#methodology">Methodology</a></li>
          <li><a href="#">Products</a></li>
        </ul>
      </nav>
    </aside>
  </div>
</div>

Note: I changed the widths on each elements from 33% and 67% respectively to 30% and 70% because the navbar didn't fit.

This seems to make everything in the container div to be less than 940 px which was the use of this div. Do you know what is causing this? — Chris, Feb 06 '16 at 23:22
Yes, you set the `containter` to have `max-width: 940px`. Therefore, it will only take the minimum needed width. Change it instead to `width: 940px` and it will force it to that. — Chris, Feb 06 '16 at 23:24

score 1 · Accepted Answer · answered Feb 06 '16 at 23:30

If you can use flexbox, you can set the container to display:flex with justify-content:space-between (items are evenly distributed in the line; first item is on the start line, last item on the end line) and align-items:center (items are centered in the cross-axis). See the demo below, I simplified the HTML slightly.

jsFiddle

.container {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border: 1px solid;
}
.site-logo {
  font-size: 150%;
}
.site-nav ul {
  padding: 0;
  margin: 0;
}
.site-nav li {
  list-style: none;
  display: inline-block;
  border-right: 1.5px solid;
  margin: 0 0 0 10px;
  padding: 0 14px 0 0;
}
.site-nav li:last-child {
  border: none;
  padding-right: 0;
}

<div class="container">
  <div class="site-logo">Company Name</div>
  <nav class="site-nav">
    <ul>
      <li><a href="draft1-1.html">Home</a></li>
      <li><a href="contact.html" class="last">Contact Us</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#methodology">Methodology</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </nav>
</div>

Are there any cons to using flexbox as opposed to a table solution? — Chris, Feb 07 '16 at 00:22
See this - http://stackoverflow.com/questions/18419082/flexbox-vs-tables-why-do-we-need-flexbox But that post is outdated, flexbox supports are pretty good now if you don't care about outdated browsers. — Stickers, Feb 07 '16 at 00:34
I've really became a big fan of flexbox since this post and wanted to thank you for turning me on to them. For those looking to learn the two best resources I have found are https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and a set of videos by Wes Bos at flexbox.io — Chris, Feb 12 '16 at 18:45

Vertically centering two divs using CSS

2 Answers2