文本垂直居中对齐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.

Answer 1

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.

Answer 2

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>