Vertically Center a Div - html

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/

Answer 2

If you are displaying an element as a table, why not use a table?
As far as I know though, it is not possible to center content unless you know it's height. IF you know the height you can use something like this:
.container {
position: relative;
}
.vertical {
position: absolute:
top: 50%;
height: 200px;
margin-top: -100px; // This is half the height
}

Answer 3

why dont You try using <table>? or do u want to do it with <div> itself?

Answer 4

I know this is an old question,
but did anyone try display:table/table-cell/table-row instead? That should be fine.
(ofcourse not working on older IE etc.)
Types from W3Schoools:http://www.w3schools.com/cssref/pr_class_display.asp
These types can be set to any html element, and it should render as a part of a table (or a table itself).
This meaning you should be able to use divs to render data as if it was in a table.
I have not tested this though and the last time I used this was years ago.
able The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like )
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group