垂直對齊導航標題以及標題

Question

我似乎無法獲得導航到vertical-align: middle;以及標題。任何想法如何解決這個問題？

https://jsfiddle.net/ozvmkeaq/

header, 
 
nav { 
 
    height: 80px; 
 
} 
 
header { 
 
    background-color: #E74C3C; 
 
    vertical-align: middle; 
 
} 
 
header nav { 
 
    float: right; 
 
    list-style: center; 
 
    text-transform: uppercase; 
 
    color: #ECF0F1; 
 
    vertical-align: middle; 
 
} 
 
nav li { 
 
    display: inline; 
 
    padding: 10px; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 
.title { 
 
    float: left; 
 
} 
 
.title h1 a { 
 
    color: #ECF0F1; 
 
    text-decoration: none; 
 
    padding: 15px; 
 
}

<header> 
 
    <div class="title"> 
 
    <h1><a href="index.html"> HTTP</a></h1> 
 
    </div> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

通過添加以下CSS，鏈接垂直居中。

ul { margin: 0; height: 100%; display: table; width: 100%;} 
nav ul li { height: 100%; vertical-align: middle; display: table-cell;} 

我也更新您的提琴：https://jsfiddle.net/ozvmkeaq/2/

基本上，你需要的表和垂直對齊屬性的組合來告訴你，你在中間的內容瀏覽器。

作爲替代方案，您也可以使用彈性盒。

display：flex; align-items：center;

Answer 2

您需要設置vertical-align:middle到列表中的項目本身。我也將其設置爲直接的聯繫，以彌補任何列表項填充等

例如：

nav ul li, nav ul li a{vertical-align:middle;} 

這是因爲垂直對齊設置基於父元素上的位置，所以你需要將其設置爲子元素（不同於諸如text-align之類的屬性，您可以將樣式設置爲父元素以影響其中的元素）。

垂直對齊在W3C vertical-align property guide處查看更多內容。

或Try it here。

Answer 3

vertical-align CSS屬性指定inline或表格單元格框的垂直對齊方式。

元素，如h1，ul等都是block level默認情況下，所以它不會起作用。雖然可以將它們重置爲內聯級別，並在中間垂直對齊它們。但出於簡單的原因，我建議使用現代flexbox佈局，請參閱以下示例和註釋。

jsFiddle

header { 
 
    height: 80px; 
 
    padding: 0 20px; 
 
    display: flex; 
 
    justify-content: space-between; /*add space between*/ 
 
    align-items: center; /*center algin vertically*/ 
 
    background-color: #e74c3c; 
 
} 
 
header ul { 
 
    display: flex; 
 
    list-style: none; 
 
} 
 
header li { 
 
    padding-left: 10px; 
 
} 
 
header a { 
 
    text-decoration: none; 
 
    color: #ecf0f1; 
 
}

<header> 
 
    <div class="title"> 
 
    <h1><a href="index.html">Title</a></h1> 
 
    </div> 
 
    <nav class="nav"> 
 
    <ul> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 4

試試這個

header { 
    background-color: #E74C3C; 
    height: 5em; 
    position: relative; 
} 

header * { 
    padding: 0; 
    margin: 0; 
} 

header a { 
    text-decoration: none; 
} 

header nav, header .title { 
    display: block; 
    height: 100%; 
} 

header .title { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

header .title h1 { 
    position: relative; 
    top: 0.70em; 
} 

header .title a { 
    color: #ECF0F1; 
    margin: 0 0.5em; 
} 

header nav { 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 0 0.5em; 
} 

header ul { 
    list-style-type: none; 
    list-style-position: inside; 
    position: relative; 
    top: 2em; 
    right: 0; 
} 

header ul li { 
    display: inline-block; 
    padding-right: 0.25em; 
} 

Answer 5

更新這2風格，它應該做的伎倆。

nav ul 
{ 
    padding: 0px; 
    margin: 0px; 
} 

nav li 
{ 
    display:inline-block; 
    padding-right:10px; 
    padding-left:10px; 
    line-height: 80px; 
    background-color: green; 
}