Text Align Middle Vertically CSS

Question

I building a header and I have HTML code below

#header{
 height:50px;
 border-bottom: 1px solid #000;
}
.left{
 display: inline-block;
 float: left;
}
.right{
 display: inline-block;
 float: right;
}
.logo{
 display: inline-block;
 font-size: 40px;
}
.slogan{
 display: inline-block;
 vertical-align: middle;
}

.menu{
 margin: 0px;
}
.menu li {
 display: inline;
}

<div id="header">
 <div class="left">
  <div class="logo">LOGO</div>
  <div class="slogan">SLOGAN HERE</div>
 </div>
 <div class="right">
  <nav>
   <ul class="menu">
    <li><a href="" title="">Menu 1</a></li>
    <li><a href="" title="">Menu 2</a></li>
    <li><a href="" title="">Menu 3</a></li>
    <li><a href="" title="">Menu 4</a></li>
   </ul>
  </nav>
 </div>
</div>

I want Slogan and Menu is middle of header div so I use CSS vertical-align: middle; but it's not working. It only working with vertical-align: top;

How to fix it ?

Thanks you so much.

possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div). This question gets asked *hundreds* of times a week. Please search from the previous questions. — jbutler483, Jan 08 '15 at 12:35
By using display:table and display: table-cell you can achieve this — swapnil solanke, Jan 08 '15 at 12:37

score 0 · Answer 1 · answered Jan 08 '15 at 12:32

You could use line-height to achieve the effect you want. The headers height is 50px, so you should give the list items a line-height of 50px. I think this will solve your problem in this case but it wouldn't work if your text has multiple lines.

Gildas.Tambo · Accepted Answer · 2015-01-08T12:41:25.050

Change display: inline-block to display: table on element .left, then on .slogan change display: table-cell;to display: inline-block;.

#header{
 height:50px;
 border-bottom: 1px solid #000;
}
.left{
    /*display: inline-block;*/
 display: table;
    float: left;
}
.right{
 display: inline-block;
 float: right;
}
.logo{
 display: inline-block;
 font-size: 40px;
}
.slogan{
 vertical-align: middle;
    display: table-cell;
    /*display: inline-block;*/
}

.menu{
 margin: 0px;
}
.menu li {
 display: inline;
}

<div id="header">
 <div class="left">
  <div class="logo">LOGO</div>
  <div class="slogan">SLOGAN HERE</div>
 </div>
 <div class="right">
  <nav>
   <ul class="menu">
    <li><a href="" title="">Menu 1</a></li>
    <li><a href="" title="">Menu 2</a></li>
    <li><a href="" title="">Menu 3</a></li>
    <li><a href="" title="">Menu 4</a></li>
   </ul>
  </nav>
 </div>
</div>

Text Align Middle Vertically CSS

2 Answers2