我有一個帶有影像和導航鏈接的頁眉。
由于某些原因，選單項沒有在垂直方向上居中。
。span class="hljs-selector-class">.header {
position: relative;
margin-top: 70px;
background: 紅色。
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY（-50%）。
max-width: 150px。
}
.nav {
list-style: none;
float: right;
}
.nav li {
display: inline-block;
}<div class="header" >
<img src="http://placehold. it/200" class="logo" />
<ul class="nav">
<li>Home</li>/span>
<li>聯系</li>/span>
<li>關于</li>/span>
</ul>/span>
</div>/span>實時代碼。https://jsfiddle.net/f2u97o3m/
我試著在<ul>和<li>項中添加vertical-align: middle，但是沒有成功。
為什么它沒有居中，如何將它垂直居中？
uj5u.com熱心網友回復：
。span class="hljs-selector-class">.header {
position: relative;
margin-top: 70px;
background: 紅色。
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY（-50%）。
max-width: 150px。
}
.nav {
list-style: none;
float: right;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
line-height: 40px;
}<div class="header" >
<img src="http://placehold. it/200" class="logo" />
<ul class="nav">
<li>Home</li>/span>
<li>聯系</li>/span>
<li>關于</li>/span>
</ul>/span>
</div>/span>您需要在'.nav'中添加'margin: 0; padding: 0;'到'.nav'，并為'li'指定'line-height: 40px'。我想你會把它放在里面，請確保你把它加進去。
uj5u.com熱心網友回復：
這里有一個將你的ul垂直居中的解決方案。使用height: 40px;而不是使用padding: 10px 0;在孩子們的上方和下方添加填充。另外，這個方案沒有使用float: right;，而是使用了text-align: right。
span class="hljs-selector-class">.header {
position: relative;
margin-top: 70px;
background: 紅色。
/* height: 40px; */
padding: 10px 0;
}
.logo {
position: absolute;
top: 50%;
transform: translateY（-50%）。
max-width: 150px。
}
.nav {
list-style: none;
/* float: right; */
text-align: right;
}
.nav li {
display: inline-block;
}<div class="header" >
<img src="http://placehold. it/200" class="logo" />
<ul class="nav">
<li>Home</li>/span>
<li>聯系</li>/span>
<li>關于</li>/span>
</ul>/span>
</div>/span>uj5u.com熱心網友回復：
一個解決方案是將你的元素轉換為一個柔性容器。
你的代碼將看起來像這樣：
.nav {
display: flex;
align-items: center;
height: 100%;
float: right;
為了在你的串列項之間建立一個間隙，你可以只添加一些左右的邊距：
.nav li {
margin: 0 0.5em;
}
我還注意到一件事，就是你沒有任何邊距/填充的重置。
在你的CSS的頂部，把：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
這有助于減少元素的默認margin和padding可能產生的一些意外的復雜情況。
uj5u.com熱心網友回復：
你可以使用flexbox進行對齊。 https://www.w3schools.com/css/css3_flexbox.asp 如果你想在中心和垂直方向上對齊，那么就像這樣輸入
。.nav {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
如果你想讓它水平對齊，那么你可以用row替換flex-direction，如
flex-direction:row;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/306763.html
標籤：
下一篇：<SKPaymentQueue:0x281194d90>。支付完成，有錯誤。錯誤Domain=ASDErrorDomainCode=500"未處理的例外"