Html 在“ul”中垂直对齐“li”中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15789572/
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
Vertically align 'li' middle in 'ul'
提问by Chris Till
I have a simple unordered list like so:
我有一个简单的无序列表，如下所示：
<ul class="flavours">
<li>Chocolate</li>
<li>Caramel</li>
<li>Watermelon</li>
</ul>
<ul class="flavours">has a min-heightof 200pxand it grows as more <li>elements are added to the list via jQuery ui drag and drop library.
<ul class="flavours">有一个min-height，200px随着更多<li>元素通过 jQuery ui 拖放库添加到列表中，它会增长。
When there is just one or two <li>elements in the list, how can I vertically align these in the middle of the whole <ul>. So as when the height is 200pxthe items would be dead center, horizontally and vertically. Currently they are just positioned center top.
当<li>列表中只有一两个元素时，如何将它们垂直对齐到整个<ul>. 因此，当高度为时200px，项目将在水平和垂直方向上处于死点。目前他们只是定位在中间顶部。
采纳答案by atw13
Centering things vertically tends to be a tricky affair if you want cross-browser support, especially for IE and old browsers - unless you're willing to use JavaScript or a table. All common browsers support vertical centering within a table cell, so one option is to forget centering the <li>elements in the <ul>and instead create a tablewith height: 100%and one cell inside, with vertical-align: middle. It's not a popular answer but sometimes using a table is the most practical, as is well argued in this SO response.
如果您想要跨浏览器支持，尤其是对于 IE 和旧浏览器，垂直居中往往是一件棘手的事情——除非您愿意使用 JavaScript 或表格。所有常见的浏览器都支持表格单元格内的垂直居中，因此一种选择是忘记将 中的<li>元素居中<ul>，而是在内部创建一个tablewithheight: 100%和一个单元格， with vertical-align: middle。这不是一个流行的答案，但有时使用表格是最实用的，正如在这个 SO response 中充分论证的那样。
If you do not want to use a table and can't use the display:table-cellfor browser support, then you'll probably need to use JavaScript. Again, I would try to center the ul in a container, not the liin the ul. The approach is generally to find the height of the container, find the height of the ul, take the difference, cut it in half, and set the topor the margin-topof the ulto that value, depending on whether you want to use absolutepositioning or not.
如果您不想使用表格并且不能使用display:table-cell浏览器支持，那么您可能需要使用 JavaScript。同样，我会尽量居中UL在一个容器中，而不是li在ul。该方法通常是找到容器的高度，找到的高度ul，走差异化，把它切成两半，并设置top或margin-top的ul该值，取决于你是否要使用absolute定位与否。
The exact best solution is hard to give without seeing the context of the list in your page.
如果不查看页面中列表的上下文，就很难给出确切的最佳解决方案。
Here's a fiddleusing absolutepositioning and JavaScript. Using margin-topand default positionin this context is tricky because of margin collapse with the outer div, but if you can use it then you can use margin: 0 autoto do the horizontal centering, which is nice because then you can ignore the width.
这是一个使用absolute定位和 JavaScript的小提琴。在这种情况下使用margin-top和 defaultposition很棘手，因为外边 div 的边距折叠，但如果您可以使用它，那么您可以使用它margin: 0 auto来进行水平居中，这很好，因为这样您就可以忽略宽度。
回答by cimmanon
Flexbox can do this:
Flexbox 可以做到这一点：
.flavours {
min-height: 10em;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-flex-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
Using Flexbox with inline list items that wrap (note that wrapping reduces browser support to Chrome, Opera, and IE10):
将 Flexbox 与包装的内联列表项一起使用（请注意，包装减少了浏览器对 Chrome、Opera 和 IE10 的支持）：
.flavours {
min-height: 10em;
border: 1px solid;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-line-pack: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
@supports (flex-wrap: wrap) {
.flavours {
display: flex;
}
}
.flavours li {
margin: .5em 1em;
}
Or you can convert your list into a table-cell element:
或者您可以将列表转换为表格单元格元素：
.flavours {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
回答by brbcoding
I would personally center everything within a parent div... A working JSFiddle can be found here.
我个人会将所有内容都集中在一个父级中div......可以在这里找到一个有效的JSFiddle。
HTML:
HTML：
<div>
<ul class="flavours">
<li>Chocolate</li>
<li>Caramel</li>
<li>Watermelon</li>
</ul>
</div>
CSS:
CSS：
div{
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
Or you can just add the same styling to the ulif you would prefer.
或者，ul如果您愿意，也可以将相同的样式添加到。
