How can I align li elements in ul vertically centered?

Question

I have a ul which is has the elements laid out horizontally in a menu format. I want to make the li's be vertically aligned in the space the ul occupies, however I'm struggling to get it to work.

Does anyone have any ideas where I'm going wrong?

CSS

a { 
    color:#d82727; 
    text-decoration:none; 
    font-weight:normal; 
}
a:link { 
    color:#d82727; 
}
a:visited { 
    color:#d82727; 
}
a:focus { 
    color:#d82727; 
}
a:hover { 
    color:#d82727; 
    font-weight:bold; 
}


#menu_bar {
    background-color:#ffffff;
    height:40px;
    border-bottom:2px #eeeeee solid;
    padding-left:20%;
    padding-right:20%;
}
#menu_bar ul {
    padding:0;
    margin:0;
    height:100%;
}
#menu_bar ul li {
    display: inline;
    height:100%;
    vertical-align: middle;
    padding-left:5px;
    padding-right:5px;
}
#menu_bar ul li a:hover {
    color:#d82727;
    font-weight:bold;
}


.active { 
    color:#d82727; 
    border-bottom:2px #d82727 solid; 
}

HTML

<div id="menu_bar">
    <ul>
        <li><a href="#/foo" class="active">Foo</a></li>
        <li><a href="#/bar">Bar</a></li>
    </ul>
</div>

And a fiddle of my current Code Here

score 0 · Answer 1 · edited May 23 '17 at 11:43

Actually there are multiple ways to achieve vertical alignment. However, since the list items are being displayed as inline in this case, you could that by adding a full-height inline element having vertical-align of middle to the <ul> as follows:

#menu_bar ul:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

This method is described here and here. Here is an online example:

a { 
    color:#d82727; 
    text-decoration:none; 
    font-weight:normal; 
}
a:link { 
    color:#d82727; 
}
a:visited { 
    color:#d82727; 
}
a:focus { 
    color:#d82727; 
}
a:hover { 
    color:#d82727; 
    font-weight:bold; 
}

#menu_bar {
    background-color:#ffffff;
    height:40px;
    border-bottom:2px #eeeeee solid;
    padding-left:20%;
    padding-right:20%;
}

#menu_bar ul {
    padding:0;
    margin:0;
    height:100%;
}

#menu_bar ul:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#menu_bar ul li {
    display: inline;
    height:100%;
    vertical-align: middle;
    padding-left:5px;
    padding-right:5px;
}
#menu_bar ul li a:hover {
    color:#d82727;
    font-weight:bold;
}


.active { 
    color:#d82727; 
    border-bottom:2px #d82727 solid; 
}

<div id="menu_bar">
    <ul>
        <li><a href="#/foo" class="active">Foo</a></li>
        <li><a href="#/bar">Bar</a></li>
    </ul>
</div>

How can I align li elements in ul vertically centered?

1 Answers1