将UL在DIV中垂直居中 [英] Vertically centering a UL inside a DIV

问题描述

我有以下内容：

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

我想将ul在div中垂直居中，但不确定如何。
小提琴演示有人可以建议我吗。

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

马里洛

推荐答案

CSS不支持任意块的垂直居中元素。但是，有许多 hack可以让您使其工作。

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

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

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

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

一个可以做到这一点的技巧：（也有很好的解释） http：// phrogz。 net / css / vertical-align / index.html

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

这篇关于将UL在DIV中垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！