大佬教程收集整理的这篇文章主要介绍了如何在<ul>中垂直对齐<li>元素？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我假设由于您使用的是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>
我有一个水平线<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>
以上是大佬教程为你收集整理的如何在<ul>中垂直对齐<li>元素？全部内容，希望文章能够帮你解决如何在<ul>中垂直对齐<li>元素？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。