CSS 如何垂直对齐 <ul> 中的 <li> 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3400548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align <li> elements in <ul>?
提问by akonsu
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.
我有一个水平的<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>
采纳答案by Richard JP Le Guen
I assume that since you're using an XML declaration, you're not worrying about IE or older browsers.
我假设由于您使用的是 XML 声明，因此您不必担心 IE 或更旧的浏览器。
So you can use display:table-celland display:table-rowlike so:
所以你可以使用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>
回答by wade
Here's a good one:
这是一个很好的：
Set line-heightequal to whatever the heightis; works like a charm!
设置line-height等于任何height值；奇迹般有效！
E.g:
例如：
li {
height: 30px;
line-height: 30px;
}
回答by dimmech
回答by HesapAdam
I had the same problem. Try this.
我有同样的问题。尝试这个。
<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;
}
