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表格）

Answer 2

使用锚点标记将其自动对齐在div标签的中心，如下所示：

a{margin:0 auto;}

这会自动纵向和横向集中文本。 :)但由于锚标签是内联标签，我们需要像div

那样指定div标签

div a {display:block;
width:50px;}

其中50px是相对于div的宽度。点击此处why margin 0 auto doesn't work

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

2 个答案: