How to vertically align elements inside of the navigation bar?

Question

I have created navigation bar that contains links for different tabs and drop down for the menu. I'm having problem to vertically align all elements inside of the navigation bar. Seems that select tag caused some of the problems. Here is example of my outline:

 header.headerBox { width: 100%; height: 80px; border-top: 2px solid #000099; border-right: 2px solid #000099; border-left: 2px solid #000099; border-bottom: 2px solid #000099; background-color: #87CEFF; } h1.mainTitle { color: #000099; text-align: center; margin: 0px; padding-top: 5px; padding-bottom: 5px; } nav.xNavigation { height: 100%; color: #000099; border-top: 2px solid #000099; margin: 0px; padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } nav.xNavigation a { color: #000099; text-decoration: none; cursor: pointer; font-weight: bold; } nav.xNavigation select { float: right; } nav.xNavigation a:hover { color: white; } 

 <header class="headerBox"> <h1 class="mainTitle">Single Page Application</h1> <nav class="xNavigation"> <a href="#" id="tab1">Tab 1</a> | <a href="#" id="tab2">Tab 2</a> | <a href="#" id="tab3">Tab 3</a> | <a href="#" id="tab4">Tab 4</a> | <select name="menu" id="menu"> <option value="mainBox" selected="selected">Home</option> <option value="settingsBox">Settings</option> </select> </nav> </header> 

As you can see in the snippet above elements are not vertically aligned. I'm not sure if there is a good way to organize the elements. If anyone can help please let me know. Thank you.

Answer 1

If you are open to using flexbox you can make a few adjustments and create the layout you want.

example

 header.headerBox { width: 100%; height: 80px; border: 2px solid #000099; background-color: #87CEFF; display: flex; flex-direction: column; } h1.mainTitle { color: #000099; text-align: center; margin: 0px; padding: 5px 0; } nav.xNavigation { color: #000099; border-top: 2px solid #000099; margin: 0px; padding: 2px 5px 2px 5px; flex: 1; display: flex; align-items: center; } nav.xNavigation a { color: #000099; text-decoration: none; cursor: pointer; font-weight: bold; } nav.xNavigation select { margin-left: auto; } nav.xNavigation a:hover { color: white; } 

 <header class="headerBox"> <h1 class="mainTitle">Single Page Application</h1> <nav class="xNavigation"> <a href="#" id="tab1">Tab 1</a> | <a href="#" id="tab2">Tab 2</a> | <a href="#" id="tab3">Tab 3</a> | <a href="#" id="tab4">Tab 4</a> | <select name="menu" id="menu"> <option value="mainBox" selected="selected">Home</option> <option value="settingsBox">Settings</option> </select> </nav> </header> 

Answer 2

It's because you set a fixe height ;)

 header.headerBox { width: 100%; border-top: 2px solid #000099; border-right: 2px solid #000099; border-left: 2px solid #000099; border-bottom: 2px solid #000099; background-color: #87CEFF; } h1.mainTitle { color: #000099; text-align: center; margin: 0px; padding-top: 5px; padding-bottom: 5px; } nav.xNavigation { display:flex; flex-flow: row wrap; align-items: center; color: #000099; border-top: 2px solid #000099; margin: 0px; padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-bottom: 10px; } nav.xNavigation a { color: #000099; text-decoration: none; cursor: pointer; font-weight: bold; } nav.xNavigation select { display:flex; flex-flow: row wrap; justify-content: flex-end; } nav.xNavigation a:hover { color: white; } .select-container { width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-end; padding-top: -20px; margin-top: -20px; } 

  <header class="headerBox"> <h1 class="mainTitle">Single Page Application</h1> <nav class="xNavigation"> <a href="#" id="tab1">Tab 1</a> | <a href="#" id="tab2">Tab 2</a> | <a href="#" id="tab3">Tab 3</a> | <a href="#" id="tab4">Tab 4</a> | <div class='select-container'> <select name="menu" id="menu"> <option value="mainBox" selected="selected">Home</option> <option value="settingsBox">Settings</option> </select> </div> </nav> </header>