li中文字的垂直對齊

Question

我最近一直在用HTML / CSS鬼混，並且試圖在li垂直對齊文本，以便使其居中。 我已經看過這個問題（或它的某種變體）很多次了，所以我提前為這個問題道歉，我確信您已經厭倦了，但是我無法獲得任何建議的解決方案上班。 我還試圖避免為li設置特定的height / line-height ，因為我希望這可以調整為屏幕尺寸。

這是HTML：

<ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Experience</a></li>
    <li><a href="">Contact</a></li>
</ul>

這是CSS：

#nav {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav li {
    text-align: center;
    height: 25%;
    width: 100%;
    margin: 0 auto;
}

#nav li a {
    display: block;
    height: 100%;
}

#nav li a:hover {
    background: #ccc;
}

我還設置了這個小提琴 ，以防您想弄亂它，看看是否可以使其正常工作。 謝謝！

Answer 1

您可以像這樣將#nav li的行高設置為視口高度的25％

#nav li {
 text-align: center;
 height: 25%;
 width: 100%;
 margin: 0 auto;
 line-height: 25vh; /* this is the only thing you need to add */
}

它非常簡單，簡短，可以處理文本（如字體大小等）或列表的任何更改。 您可以從列表中添加或刪除多少項，或者對#nav或其列表項的高度進行什么更改都沒有關系。 請參閱jsFiddle的第一個工作修訂版 ；）

Answer 2

設置display: table; 在你的li和

display: table-cell;
vertical-align: middle;

在你a

最終樣式：

#nav li {
    display: table;
    text-align: center;
    height: 25%;
    width: 100%;
    margin: 0 auto;
}

#nav li a {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

小提琴的第六版

Answer 3

在CSS中嘗試這些更改

#nav li {
    text-align: center;
    height: 25%;
    width: 100%;
    margin: 0 auto;
    display: table;  /* added */
}

#nav li a {
    display: table-cell;  /* changes from block to table-cell */
    vertical-align: middle;  /* added */
    height: 100%;
}

在這里查看工作示例http://jsfiddle.net/t6ryfqzk/7/

Answer 4

如果要讓li彼此相鄰，請嘗試使其成為inline-block塊；如果希望它們在彼此之下，請嘗試將其成塊。 確保為li元素提供固定的寬度，並將它們的text-align設置為centered 。