如何垂直alignment<ul>中的<li>元素？
我有一个水平的<ul> ，我需要垂直居中每个<li> 。 我的标记在下面。 每个<li>都有一个边框，我需要这些物品以及它们的内容在中间垂直。 请帮忙; 我是CSS新手。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .toolbar li { border: solid 1px black; display: block; float: left; height: 100px; list-style-type: none; margin: 10px; vertical-align: middle; } .toolbar li.button { height: 50px; } </style> </head> <body> <div class="toolbar"> <ul> <li><a href="#">first item<br /> first item<br /> first item</a></li> <li><a href="#">second item</a></li> <li><a href="#">last item</a></li> <li class="button"><a href="#">button<br /> button</a></li> </ul> </div> </body> </html>
我认为，既然你使用的是XML声明，你不用担心IE或者老版本的浏览器。
所以你可以使用display:table-cell和display:table-row像这样：
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .toolbar ul { display:table-row; } .toolbar ul li { display: table-cell; height: 100px; list-style-type: none; margin: 10px; vertical-align: middle; } .toolbar ul li a { display:table-cell; vertical-align: middle; height:100px; border: solid 1px black; } .toolbar ul li.button a { height:50px; border: solid 1px black; } </style> </head> <body> <div class="toolbar"> <ul> <li><a href="#">first item<br /> first item<br /> first item</a></li> <li><a href="#">second item</a></li> <li><a href="#">last item</a></li> <li class="button"><a href="#">button<br /> button</a></li> </ul> </div> </body> </html>
这是一个很好的例子：
设置line-height高等于任何height ; 奇迹般有效！
例如：
li { height: 30px; line-height: 30px; }
您可以为此使用flexbox。
ul { display: flex; align-items: center; }
如何使用flexbox的详细说明可以在这里find。
我有同样的问题。 尝试这个。
<nav> <ul> <li><a href="#">AnaSayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">İletişim</a></li> </ul> </nav>
@charset "utf-8"; nav { background-color: #9900CC; height: 80px; width: 400px; } ul { list-style: none; float: right; margin: 0; } li { float: left; width: 100px; line-height: 80px; vertical-align: middle; text-align: center; margin: 0; } nav li a { width: 100px; text-decoration: none; color: #FFFFFF; }
