Question

为什么这不起作用（即div内容不是居中 - 垂直）？：

<div style="display: table;">
    <div style="vertical-align: middle; display:table-cell; height: 100px; font-size: 11px;">
        <a target="_self" runat="server" href="~/daily.aspx">
        <img src="images.png" /></a>
            content in div<br />
     </div>
</div>

在了解我如何垂直对齐div并且其内容失败时无处不在。

任何人对div中内容的最佳css样式有任何想法。

UPDATE 需要解释的是，我需要垂直对齐图像的文本而不仅仅是div。文字是图片的底部。可能必须使用花车。

Answer 1

如果您只需要在文本中间对齐文本，则会执行以下操作：

<div>
    <div>
        <a target="_self" runat="server" href="~/daily.aspx">
        <img src="images.png" style="vertical-align: middle;"/></a>
        content in div<br />
    </div>
</div>

这是一个例子http://jsfiddle.net/Tetaxa/tVQc6/

Answer 2

如果要将元素显示为表格，为什么不使用表格？

据我所知，除非你知道它的高度，否则不可能将内容集中在一起。如果你知道高度你可以使用这样的东西：

.container {
    position: relative;
}

.vertical {
    position: absolute:
    top: 50%;
    height: 200px;
    margin-top: -100px; // This is half the height
}

Answer 3

为什么不尝试使用<table>？或者你想用<div>本身吗？

Answer 4

我知道这是一个老问题，

但有人试过显示：table / table-cell / table-row代替？那应该没问题。（当然不适用于较旧的IE等。）

来自W3Schoools的类型：http://www.w3schools.com/cssref/pr_class_display.asp

这些类型可以设置为任何html元素，它应该呈现为表（或表本身）的一部分。这意味着您应该能够使用div来呈现数据，就像它在表中一样。我没有测试过这个，上次我用这个是几年前。

able元素显示为表格 table-caption元素显示为表格标题 table-cell元素显示为表格单元格
table-column该元素显示为表列
table-column-group元素显示为表列组（如） table-footer-group元素显示为表尾页行组
table-header-group该元素显示为表头行组
table-row元素显示为表格行 table-row-group元素显示为表行组

垂直居中

4 个答案: