CSS 如何在无序的 html 列表中垂直对齐项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1970838/
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 can I vertically align items in an unordered html list?
提问by pablo
How can I vertically align items in an unordered list to work in IE6 and 7?
如何垂直对齐无序列表中的项目以在 IE6 和 7 中工作？
I can't just set line-height to the full height because I have both 1 row items and 2 row items.
我不能只将 line-height 设置为全高，因为我有 1 行项目和 2 行项目。
My code is:
我的代码是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
ul {
list-style: none;
border: 1px solid black;
height: 40px;
}
li {
float: left;
margin-right: 10px;
height: 40px;
width: 46px;
}
a {
}
</style>
</head>
<body>
<ul>
<li>
<a href="/">item1</a>
</li>
<li>
<a href="/">two lines</a>
</li>
</ul>
</body>
</html>
回答by nwhiting
You cannot float your items to the left and expect them to vertically line up....
您不能将您的项目浮动到左侧并期望它们垂直排列......
Remove
消除
float: left;
From the LI style...
从LI风格...
回答by user1721135
if i understand correctly you want to use the float to shrink wrap the li?
如果我理解正确，您想使用浮点数来收缩包裹 li？
If thats the case you need to set
如果是这种情况，您需要设置
li {clear:left;}
So the lis are below each other, not next to each other. You can also use inline-block if you want the li to shrink wrap to the content.
所以 lis 在彼此下方，而不是彼此相邻。如果您希望 li 收缩包装到内容，您也可以使用 inline-block 。
Also, depending on the goal of this, it might be approproate to use a table, depending on what it will be used for.
此外，根据此目标，使用表格可能是合适的，具体取决于它将用于什么目的。
回答by Ezequiel Muns
If I understand correctly, you want a horizontally displayed list where each item has a set width and height, but the text inside is vertically centred, and there may be items that have two lines of text.
如果我理解正确，您需要一个水平显示的列表，其中每个项目都有一个设置的宽度和高度，但里面的文本是垂直居中的，并且可能有两行文本的项目。
If you know pre-rendering which items will be two lines you can apply the a CSS class that sets the line-height: 40px;only on those items with a single line. This is not normally the case thought, so the best way to go is to use JS to dinamically alter the line-height after the list has been rendered.
如果您知道预渲染哪些项目将是两行，您可以应用一个 CSS 类，该类line-height: 40px;在这些项目上只设置一行。通常情况并非如此，因此最好的方法是在呈现列表后使用 JS 动态地更改行高。
See this jsfiddle: http://jsfiddle.net/UEsAS/2/
看到这个jsfiddle：http: //jsfiddle.net/UEsAS/2/
In essence, alter your CSS to not set a height on the lis (this will cause them to be have a lower height if they are one-line, which is how you can detect which ones to alter). Then run the following (assuming jQuery):
从本质上讲，更改 CSS 以不在lis上设置高度（如果它们是一行，这将导致它们具有较低的高度，这是您可以检测哪些要更改的方式）。然后运行以下（假设 jQuery）：
$(function() {
var maxHeight = 40;
$('li').each(function(i, el) {
if ($(el).height() < maxHeight) {
$(el).css('line-height', maxHeight + 'px');
}
});
});?
回答by Anthony
Sorry if this isn't a proper answer, but it may help clear things up:
对不起，如果这不是一个正确的答案，但它可能有助于澄清问题：
Why are you using floats instead of display: inlinefor your list items?
为什么你使用浮点数而不是display: inline你的列表项？
回答by prodigitalson
The rows essentially be the same height. So there is no way to effectively "merge cells" in table speak. You should set the line height to the height of the "two line" items and then use the vertical-align property to align them.
行基本上是相同的高度。所以没有办法在表格中有效地“合并单元格”。您应该将行高设置为“两行”项目的高度，然后使用 vertical-align 属性对齐它们。
