Question

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 everywhere in understanding how I can vertically align a div and it’s content has failed.

Anybody any ideas in the best css styling for content in a 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.

Answer 1

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>

and here’s an example http://jsfiddle.net/Tetaxa/tVQc6/