Html 在 DIV 内垂直居中 UL

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6053592/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:40:28  来源:igfitidea点击:

Vertically centering a UL inside a DIV

htmlcss

提问by Robert Wagner

I have the following:

我有以下几点:

<div style="background: Red; height: 100px;">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

I would like to vertically center the ul in the div but I'm not sure how. Fiddle demoCan anyone advise me on this.

我想将 ul 在 div 中垂直居中,但我不确定如何。 小提琴演示谁能就此给我建议。

Marilou

马里卢

采纳答案by Jonathan

CSS does not support vertical centering of arbitrary block elements. However, there are many "hacks" that will let you "make it work".

CSS 不支持任意块元素的垂直居中。但是,有许多“技巧”可以让您“让它发挥作用”。

You can set the parent div to display:inline. However, you will then have issues with your height and background color.

您可以将父 div 设置为 display:inline。但是,您的高度和背景颜色会出现问题。

W3C Link: http://www.w3.org/wiki/CSS/Properties/vertical-align

W3C 链接:http: //www.w3.org/wiki/CSS/Properties/vertical-align

One hack that will do it: (has a great explanation too) http://phrogz.net/css/vertical-align/index.html

一个可以做到的黑客:(也有很好的解释)http://phrogz.net/css/vertical-align/index.html

回答by Code Maverick

You could always use display: table-cell;in combination with vertical-align: middle;:

您始终可以display: table-cell;与 结合使用vertical-align: middle;

HTML:

HTML:

<div>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

CSS:

CSS:

div {

    background: red;
    height: 100px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}

See working jsFiddle demo

参见工作 jsFiddle 演示

回答by devgp

Use the CSS position property

使用 CSS 位置属性

#ulid{position:relative; top:50%; left: 50%;}

pass the id to ul
<ul id="ulid">

http://jsfiddle.net/JzuFT/9/

http://jsfiddle.net/JzuFT/9/

回答by mg1075

You could try something like this: http://jsfiddle.net/S8cj5/

你可以尝试这样的事情:http: //jsfiddle.net/S8cj5/

Adding an inner span prior to the <li> inner text is something I've found quite useful in the past for vertically positioning an <li>.

在 <li> 内部文本之前添加一个内部跨度是我过去发现对于垂直定位 <li> 非常有用的东西。