如何在浮动div中垂直和水平居中锚元素？

Question

我知道这已被问过一千次,我为再次提问而道歉,但经过几分钟的搜索,我无法弄清楚这一点.

我试图将一个锚元素div水平和垂直居中在一个元素中.这个问题的基础如下.

<div></div>
<div></div>
<div>
    <a href="">Hello</a>
</div>
<div></div>
<div></div>

div {
    width: 100px;
    height: 100px;
    background-color: teal;
    box-sizing: border-box;
    margin: 10px;
    float: left;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

a {
    color: white;
    text-decoration: none;
    font-style: 14px;
}

现在,我知道我可以使用text-align: center;在包含div水平居中锚元素,我也可以用display: table-cell; vertical-align: middle;在div垂直对齐,但它似乎并没有一起工作,尤其是当div设置为左浮动.

我怎样才能实现这种相当简单的布局？另外,请详细说明我为什么尝试不起作用,因为我想学习而不是仅仅解决这个问题.

我宁愿不使用,line-height因为它打破了多行文字.

http://jsfiddle.net/xHLze/2/

Answer 1

您基本上在问题中列出了答案,但您可能只需要将样式应用于几个不同的地方:

我把display: table;对含<div>,让我设定display: table-cell;的上<a>元素,在这之后我可以适用vertical-align: middle;于垂直居中的文本.

然后我施加text-align: center;到<a>元件以水平居中.

http://jsfiddle.net/3RfgD/

我相信你错过的是你应该设置display: table;在table-cell元素的父,以便它能够正常工作.(如果某个元素不在表中,则该元素不能充当表的单元格,无论它是实际表还是CSS表)