css對齊標籤裏面li，垂直菜單

如何製作垂直和水平對齊middle標籤a裏面li？爲什麼vertical-align:middle;裏面的ulli不起作用？有什麼更好的使用padding或vertical-align？css對齊標籤裏面li，垂直菜單

body{ 
 
\t margin:0; 
 
} 
 
.col1{ 
 
\t width:150px; 
 
\t border:solid; 
 
\t height:750px; 
 
\t display:table; 
 
} 
 
ul{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
ul li{ 
 
\t list-style:none; 
 
\t height:40px; 
 
\t vertical-align:middle; 
 
} 
 
ul li a{ 
 
\t text-decoration:none; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="col1"> 
 
\t <ul> 
 
\t \t <li><a href="">Items</a></li> 
 
\t \t <li><a href="">Products</a></li> 
 
\t \t <li><a href="">Contacts</a></li> 
 
\t \t <li><a href="">Other</a></li> 
 
\t \t <li><a href="">Email</a></li> 
 
\t </ul> 
 
</div> 
 
</body> 
 
</html>

來源

2016-05-08 A191919

將以下內容添加到您的<ul>。它將工作的原因是因爲<ul>的父母的顯示設置爲display: table;如果兒童的顯示值設置爲table-cell，則他們將對vertical: align center;作出響應。另請注意，我們正在定位<ul>本身，而不是個人<li>。

ul { 
    ... 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

另外，還要考慮.col1的身高設定爲100vh代替硬編碼的像素值。

.col1 { 
    ... 
    height: 100vh; 
}

要垂直調整每個列表項內的錨，我們添加以下內容：

ul li { 
    ... 
    position: relative; 
} 
ul li a { 
    ... 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

輸出