Html 在 div 中垂直居中 ul
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16078868/
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 center ul in div
提问by Banana
This is what my code looks like.
这就是我的代码的样子。
#container {
width: 584px;
height: 50px;
position: relative;
overflow: hidden;
}
#container ul {
position: absolute;
margin: 0;
padding: 0;
width: 3504px;
}
#container ul li {
width: 584px;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}<div id="container">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>As the title says, I want to center the ul vertically inside the div. I cannot change the above CSS rules because. I've been googling solutions and trying to find a way, but everything seems to collide with the rules I already have.
正如标题所说，我想将 ul 在 div 内垂直居中。我无法更改上述 CSS 规则，因为。我一直在谷歌搜索解决方案并试图找到一种方法，但一切似乎都与我已有的规则相冲突。
Any idea how to do this?
知道如何做到这一点吗？
Would it help if instead of the #containerdiv I used a table with one row and column?
如果#container我使用只有一行和一列的表格而不是div 会有帮助吗？
回答by o.v.
Please use the search function in the future. The full answer is explained here; this is the code for your scenario:
以后请使用搜索功能。完整的答案在这里解释; 这是您的场景的代码：
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;}
.helper {
#position: absolute; /*a variation of an "lte ie7" hack*/
#top: 50%;
display: table-cell;
vertical-align: middle;}
ul{
#position: relative;
#top: -50%;
margin:0 auto;
width:200px;}
The three elements have to be nested like so:
这三个元素必须像这样嵌套：
<div class="container">
<div class="helper">
<ul><!--stuff--></ul>
</div>
</div>
回答by MMM
"Centring" a divor other containers vertically is quite tricky in CSS, here are your options.
div在 CSS 中垂直“居中”a或其他容器非常棘手，以下是您的选择。
You know the height of your container
你知道你的容器的高度
If you know the height of the container, you can do the following:
如果您知道容器的高度，则可以执行以下操作：
#container {
position: absolute;
top: 50%;
margin-top: -half_of_container_height_here;
}
So we essentially place in the middle and then offset it using a negativemargin equal to the half of the height. You parent container needs to have position: relative.
所以我们基本上放在中间，然后使用等于高度一半的负边距来抵消它。您的父容器需要有position: relative.
You don't know the exact height of your container
您不知道容器的确切高度
In this case you need to use JavaScript and calculate the appropriate margins (unfortunately you cannot use margin-top: autoor something similar).
在这种情况下，您需要使用 JavaScript 并计算适当的边距（不幸的是您不能使用margin-top: auto或类似的东西）。
回答by Phan Van Linh
You can use flexto make your ulcenter vertical, horizontal or both like
您可以使用flex使您的ul中心垂直，水平或两者都喜欢
.container{
background:#f00;
height:150px;
display:flex;
align-items:center;
/*justify-content:center;=>will make ul center horizontal*/
}
.container ul{
background:#00f;
}<div class="container">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>回答by Rob
If you can add jQuery library you could try this,
如果你可以添加 jQuery 库，你可以试试这个，
$(document).ready(function(){
// Remove li float
$("#container ul li").css("float", "none");
// Get the full height of the UL
var ulheight = $("#container ul li")[0].scrollHeight;
// Based on the height of the container being 50px you can position the UL accordingly
var pushdown = (50-ulheight)/2;
$("#container ul li").css("top", pushdown);
});
回答by Sebastian Cruz
Now you can make the parent container display:flex and align-items:center. That should work. Although flexbox properties are not supported by older browsers.
现在你可以让父容器 display:flex 和 align-items:center。那应该工作。尽管旧浏览器不支持 flexbox 属性。
