垂直居中 [英] Vertically Center a Div

问题描述

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

Why doesn't this work (i.e. div content is not centred - vertically)?:

<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>

Googling无处不在，了解如何垂直对齐一个div和它的内容失败。

Googling everywhere in understanding how I can vertically align a div and it's content has failed.

任何人在div的内容中最好的css样式的任何想法。

Anybody any ideas in the best css styling for content in a div.

UPDATE
需要解释一下需要文本垂直对齐到图像而不只是div。文本在图像底部。可能需要使用浮动。

UPDATE Need to explain that I need the text vertically aligned to the image not just the div. The text is bottom to the image. Might have to use floats.

推荐答案

如果你只需要文本中间对齐的文本， / p>

If you only need the text aligned in the middle of the text, this will do:

<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/

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