Best practice for centering the logo and menu items in the title bar vertically

Question

I constantly face the need to vertically center the logo and the main menu in the full-width header. Is there a common way to handle this?

Answer 1

#header { box-sizing: border-box; background: #ffc301; padding: 10px 15px; display: table; width: 100%; height: 70px; } .logo { background: #000; text-align: center; width: 70px; color: #fff; } .logo, .menu { vertical-align: middle; display: table-cell; } .menu ul { text-align: right; } .menu ul li { display: inline-block; vertical-align: top; } 

 <header id="header"> <div class="logo">Logo</div> <nav class="menu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </nav> </header> 

Answer 2

You can use flexbox to get it with justify-content : center; and align-items : center; .

 #header { box-sizing: border-box; background: grey; padding: 10px 15px; display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; } .logo { background: black; text-align: center; width: 70px; padding: 15px; color: #fff; } .menu{ flex: 1; text-align: right; } .menu ul li{ display: inline-block; text-decoration: none; } a{ text-decoration: none; } 

 <div id="header"> <div class="logo">logo</div> <nav class="menu"> <ul> <li><a href="#">item#1</a></li> <li><a href="#">item#2</a></li> <li><a href="#">item#3</a></li> </ul> </nav> </div> 

Answer 3

You can use the "display: inline-block" property and shorten your code as simply as shown below.

HTML:

 <header> <div class="logo"><img src="logo.png" /></div><!-- --><nav class="menu"> <ul> <li><a href="#">Item 1</a></li><!-- --><li><a href="#">Item 2</a></li><!-- --><li><a href="#">Item 3</a></li><!-- --><li><a href="#">Item 4</a></li> </ul> </nav> </header> 

CSS

 header{ background-color: grey; box-sizing:border-box; display:inlnie-block; padding:10px 15px; width:100%; } .logo,.menu{ display:inline-block; font-size:0; vertical-align:middle; } .logo{ text-align:left; width:30%; } .logo img{ max-width:100%; } .menu{ text-align:right; width:70%; } .menu ul li{ display:inline-block; font-size:0; vertical-align:middle; } .menu ul li a{ font-size:14px; line-height:18px; text-decoration:none; }