垂直居中錨內部浮動的列表項

我有一個簡單的菜單如下：垂直居中錨內部浮動的列表項

<ul class="menu"> 
    <li> 
     <a href="">Home</a> 
    </li> 
    <li> 
     <a href="">Products</a> 
    </li> 
    <li> 
     <a href="">Contact</a> 
    </li> 
</ul>

無序列表的列表元素向左浮動，並有一個固定的height：

ul.menu li { 
    float: left; 
    height: 50px; 
    list-style: none; 
    padding: 0 10px; 
    background-color: yellow; 
}

jsFiddle

現在我想垂直居中列表元素內的錨點。

什麼是最好的方法呢？

來源

2013-06-12 Alexxus

要垂直居中文本，請將line-height設置爲與元素高度相同的值。看到你有一組高度，這將沒有任何問題的工作：

.menu li a { 
    line-height: 50px; 
}

http://jsfiddle.net/QNMy7/3/

來源

2013-06-12 11:37:31 Kyle

比我快！+1 – zkanoca

這工作，謝謝。我現在可以從'li'元素中移除height屬性嗎？現在有點多餘，因爲我擔心 – Alexxus

如果刪除li元素的高度，可能會使文本居中。行高說明每行文本的高度爲50px高，與元素的高度相同，因此可以匹配。如果您有多條線路，則不會看到下一條線路。 – Kyle

.menu li { 
    float: left; 
    height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
    text-align: center; 
    min-width: 100px; 
} 

.menu li a 
{ 
    line-height: 50px; 
}

來源

2013-06-12 11:39:13 zkanoca

的問題是與.menu li類。您已聲明float將它移動到左側，但爲了使其成爲vertically-aligned，您必須刪除float並應用display:table-cell;以使vertical-alignment正常工作。

例如，

.menu li { 
    /*float: left;*/ 
    display:table-cell; 
    vertical-align:middle; 
    height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
}

這裏是WORKING SOLUTION

希望這有助於。

來源

2013-06-12 11:40:24 Nitesh

什麼？因爲你什麼時候需要'display：table-cell;'來啓用垂直居中。這確實是一種方法，但它不是唯一的方法。 – Kyle

是的。這是做它的方法之一，而不是唯一的方法。 - @KyleSevenoaks – Nitesh

我不想刪除'浮動'。列表元素應保持浮動到左側 – Alexxus

附加線高度等於高度：

.menu li { 
    float: left; 
    height: 50px; 
    **line-height: 50px;** 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
}

來源

2013-06-12 11:43:30 Airen

+1，以將'line-height'添加到'.menu li'。看到我的意見凱爾Sevenoaks的回答 – Alexxus

您可以使用line-height控制垂直對齊方式，但這只是工作可靠橫跨各列表項，如果他們都限於一行。

最可靠的方法來實現這一目標是通過去除浮動&顯示列表項的CSS table-cell：

.menu { 
    display: table; 
} 

.menu li { 
    height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
    display: table-cell; 
    vertical-align: middle; 
} 

.menu li a { 
    display: block; 
}

這樣，如果其中一個鏈接，滴到兩行，它仍然垂直居中，如下所示：

http://jsfiddle.net/QNMy7/6/

來源

2013-06-12 11:43:32 blend

[這是正確的，已經回答。]（http://stackoverflow.com/questions/17064436/vertical-centering-anchors-inside-floated-list-items/17064554#17064554） – Nitesh

。 ..做完了你。 – blend

除了浮動，表芯，你也可以使用inline-block的：

.menu li { 
    display: inline-block; 
    line-height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
} 
.menu li a { 
    vertical-align: middle; 
}

類似於其他職位，我上的a元素.menu li和vertical-align: middle設置line-height: 50px。在這個例子中你可以省略高度。

查看演示：http://jsfiddle.net/audetwebdesign/QNMy7/7/

來源

2013-06-12 11:48:07

'inline-block'在元素之間添加了令人討厭的空間。我在發帖前已經嘗試過 – Alexxus

的確，這些討厭的小空間有時很煩人。在某些情況下，佈局需要元素之間的左/右邊距，所以這不成問題。如果html代碼不包含額外的空白空間，那麼小空格就會消失，但這也是一個麻煩。如果你需要邊緣到邊緣的元素來對齊，浮線就是要走的路。 –

有一篇關於刪除[css-tricks.com]上的討厭空間的文章（http://css-tricks.com/fighting-the-space-between-inline-block-elements/）。但在閱讀之後，我希望堅持浮動 – Alexxus

垂直居中錨內部浮動的列表項

回答

相關問題