如何在導航欄中垂直對齊元素？

Question

我創建了導航欄，其中包含不同選項卡的鏈接，並包含菜單的下拉菜單。 我在垂直對齊導航欄中的所有元素時遇到問題。 似乎select標簽引起了一些問題。 這是我的輪廓示例：

 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> 

如您在代碼段中所見，元素未垂直對齊。 我不確定是否有組織元素的好方法。 如果有人可以幫忙，請告訴我。 謝謝。

Answer 1

如果您願意使用flexbox，則可以進行一些調整並創建所需的布局。

例

 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

這是因為您設置了固定高度;）

 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>