CODEWITHSUNDEEP
htmlcss
Rob
Rob

Reputation: 3084

Vertically Center a 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 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.

Upvotes: 1

Views: 6557

Answers (4)

Mathijs Segers
Mathijs Segers

Reputation: 6238

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

Upvotes: 0

Girish K G
Girish K G

Reputation: 417

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

Upvotes: 0

Tetaxa
Tetaxa

Reputation: 4393

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/

Upvotes: 2

will
will

Reputation: 4575

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
}

Upvotes: 0

Related Questions