如何垂直对齐< li>元素在< ul> ;? [英] How to vertically align <li> elements in <ul>?
本文介绍了如何垂直对齐< li>元素在< ul> ;?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个水平< ul> ，我需要将每个< li> 。我的标记在下面。每个< li> 有一个边框，我需要的项目以及它们的内容在垂直中间。请帮忙;我是CSS新手。
I have a horizontal <ul> and I need to center each <li> in it vertically. My markup is below. Each <li> has a border, and I need the items as well as their contents to be in the middle vertically. Please help; I am new to 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或旧的浏览器。
I assume that since you're using an XML declaration, you're not worrying about IE or older browsers.
所以你可以使用 display：table-cell 和 display：table-row like like：
So you can use display:table-cell and display:table-row like so:
<?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>
这篇关于如何垂直对齐< li>元素在< ul> ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
