在UL内部垂直居中UL

Question

我有以下内容：

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

我想在div中垂直居中，但我不确定如何。 Fiddle demo任何人都可以就此提出建议。

马里卢

Answer 1

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

<强> HTML：

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

<强> CSS：

div {

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

}

<强> See working jsFiddle demo

Answer 2

CSS不支持任意块元素的垂直居中。但是，有许多“黑客”可以让你“让它工作”。

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

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

一个黑客会这样做:(也有一个很好的解释）http://phrogz.net/css/vertical-align/index.html

Answer 3

使用CSS位置属性

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

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

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

Answer 4

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

在＆lt; li＆gt;之前添加内部跨度内心文字 是我过去发现的非常有用的东西 垂直定位＆lt; li＆gt;。