How do I vertically center all elements in a div?

Question

I have a logo on the left side and a list of icons + a vertical border + a link on the right. How can I center all of these vertically?

Fiddle: http://jsfiddle.net/jno6rv1z/

HTML

<header id="masthead" class="site-header" role="banner">
        <div class="site-branding">
            <h1 class="site-title"><a href="/" rel="home">Keebs</a></h1>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <ul id="social-links">
                <li class="behance"><img src="http://i.imgur.com/KTsyaQR.png" alt="Behance"></li>
                <li class="twitter"><img src="http://i.imgur.com/cleZOWn.png" alt="Twitter"></li>
                <li class="instagram"><img src="http://i.imgur.com/USZmKla.png" alt="Instagram"></li>
            </ul>
            <span class="vertical-border"></span>
            <a class="contact" href="/contact">Get in touch</a>
        </nav><!-- #site-navigation -->
</header>

CSS

#masthead {
  background: #0F0F0F;
  height: 92px;
}

#masthead .site-branding {
  float: left;
}

#masthead .site-branding h1 {
  line-height: 92px;
}

#masthead #site-navigation {
  float: right;
}

#masthead #site-navigation #social-links {
  display: inline-block;
}

#masthead #site-navigation #social-links li {
  display: inline-block;
  list-style: none;
}

#masthead #site-navigation #social-links li.behance {
  margin-right: 8px;
}

#masthead #site-navigation #social-links li.twitter {
  margin-right: 10px;
}

#masthead #site-navigation #social-links li.instagram {
  margin-right: 28px;
}

#masthead #site-navigation #social-links img {
  height: 26px;
}

#masthead .vertical-border {
  border-left: 2px solid #000;
  border-right: 2px solid #3C3C3C;
  display: inline-block;
  height: 92px;
  margin-right: 30px;
  width: 0;
}

#masthead #site-navigation .contact {
  display: inline-block;
}

first of all, you should not float elements that you want to center and make all of them displayed as inline. Take a look at this http://jsfiddle.net/jno6rv1z/3/ you will get the point. — volkh4n, Dec 28 '14 at 00:34
flexbox might help out as well css-tricks.com/snippets/css/a-guide-to-flexbox/ — fauverism, Dec 28 '14 at 00:42
possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Rob, Dec 28 '14 at 02:34
@VolkanKahyaoğlu Thank you, but I wanted to center these elements vertically. I see that it is horizontally centered. — J82, Dec 28 '14 at 23:12
@J82 oh, sorry. Could you please be more specific about which elements you want to be centered? an image could be helpful. — volkh4n, Dec 29 '14 at 00:06
@VolkanKahyaoğlu Basically, all of the elements. Here is a mock up I did for you: http://i.imgur.com/0tsPM6W.png — J82, Dec 29 '14 at 01:04

Rounin · Answer 1 · 2014-12-28T01:06:30.003

The height of the <header> is 92px.

The height of the icon <img>s is 26px.

If you add 50% of the height of the <img>s (ie. 13px) to the height of the <header> and state that as the height of the <li>, you can then vertically center the icons.

See:

ul#social-links li {
  height: 105px;
  vertical-align: middle;
}

If you then replace

#masthead .site-branding h1 {
    line-height: 92px;
}

with

#masthead a {
  height: 92px;
  vertical-align: middle;
}

you will vertically center the (linked) heading and the right-hand link.

score 0 · Answer 2 · answered Dec 29 '14 at 08:21

I prepared this: http://jsfiddle.net/jno6rv1z/4/, according the image you posted in comment section. I tried not change your css very much.

the mistakes are;

-some of your elements missing height values

-some of your elements missing float value.

-some elements have default styles like margin and padding. you should eliminate them by using html reset css file.

Css:

#masthead {
  background: #0F0F0F;
  height: 92px;
}

#masthead .site-branding {
  float: left;
}

#masthead .site-branding h1 {
  line-height: 92px;
    margin:0;
    font-size:26px;
}

#masthead #site-navigation {
  float: right;
}

#masthead #site-navigation #social-links {
  display: inline-block;
    margin:0;
    padding:0;
    float:right;

}

#masthead #site-navigation #social-links li {
  display: inline-block;
  list-style: none;
}

#masthead #site-navigation #social-links li.behance {
  margin-right: 8px;
}

#masthead #site-navigation #social-links li.twitter {
  margin-right: 10px;
}

#masthead #site-navigation #social-links li.instagram {
  margin-right: 28px;
}

#masthead #site-navigation #social-links img {
  height: 29px;
  position:relative;
    top:10px;
}

#masthead #site-navigation li{
line-height:92px;
}

#masthead .vertical-border {
  border-left: 2px solid #000;
  border-right: 2px solid #3C3C3C;
  display: inline-block;
  height: 92px;
  margin-right: 30px;
  width: 0;
    float:right;
}

#masthead #site-navigation .contact {
  display: inline-block;
    float:right;
    line-height:92px;
}

score 0 · Answer 3 · answered Dec 29 '14 at 08:56

try this.,

#masthead {
  background: #0F0F0F;
  height: 92px;
}

#masthead .site-branding {
  float: left;
}

#masthead .site-branding h1 {
  line-height: 20px;
}

#masthead #site-navigation {
  float: right;
  display:inline-block;
}

#masthead #site-navigation #social-links {
  float:left;
  line-height:80px;
}

#masthead #site-navigation #social-links li {
  display: inline-block;
  list-style: none;
    line-height:10px;
}
#masthead #site-navigation #social-links li.behance {
  margin-right: 8px;
}

#masthead #site-navigation #social-links li.twitter {
  margin-right: 10px;
}

#masthead #site-navigation #social-links li.instagram {
  margin-right: 28px;
}

#masthead #site-navigation #social-links img {
  height: 26px;
}

#masthead .vertical-border {
  border-left: 2px solid #000;
  border-right: 2px solid #3C3C3C;
  float:left;
  height: 92px;
  margin-right: 30px;
  width: 0;
}

#masthead #site-navigation .contact {
  float:left;
  line-height:80px; 
}

How do I vertically center all elements in a div?

3 Answers3