Vertically Center a Div

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.

That's what I was reading when I googling. It should have worked, but it isn't. Is it css version? Is it something to do with outer divs? I need to investigate further. — Rob, Oct 27 '11 at 08:58
IE9 and Firefox Beta 8. I'm looking at the website for doctypes, hidden a/img tag css overrides... — Rob, Oct 27 '11 at 09:01
Sorry found out I did not explain myself clearly :(. I want the text to be vertically centred to the image. If the image is 60px and want the text to centred middle of image (30px) not div. I used div because I thought this would work. — Rob, Oct 27 '11 at 09:24

score 2 · Accepted Answer · answered Oct 27 '11 at 09:34

2

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/

answered Oct 27 '11 at 09:34

Tetaxa

4,375
1
19
25

Thank you!!! Sorry to everyone else for my initial question not being explained properly. Can't believe how simple this is. Thanks again. – Rob Oct 27 '11 at 09:44
well, the `img` is positioned inline, so the line-height will be adjusted for that line. if you want the text to break to several lines on the side of the image, you need to position the `img` absolutely or float it. – Tetaxa Oct 27 '11 at 10:46

Mathijs Segers · Answer 2 · 2013-05-24T11:35:59.990

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

Could you expand on this a little bit? Try how? – Andy Hayden May 24 '13 at 07:52 — Andy Hayden, May 24 '13 at 07:52
I did, but I don't think you'll use it ;) – Mathijs Segers May 24 '13 at 11:36 — Mathijs Segers, May 24 '13 at 11:36

score 0 · Answer 3 · answered Oct 27 '11 at 08:54

0

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
}

answered Oct 27 '11 at 08:54

will

4,557
6
32
33

Good point about using a table :) But I hate using tables for something so small. I did have the height defined in my example, but I will try your example and see if it works. Thanks for the answer. – Rob Oct 27 '11 at 08:56
2

@Rob Do not use `` elements for non-tabulair data, **especially not for styling purposes**.
– Rob W Oct 27 '11 at 09:01
I wasn't aware it wasn't tabular data, but this code definitely works. – will Oct 27 '11 at 10:59

score 0 · Answer 4 · edited Oct 27 '11 at 09:43

0

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

edited Oct 27 '11 at 09:43

robertc

74,533
18
193
177

answered Oct 27 '11 at 09:07

Girish K G

407
5
11
19

1

Because it's not tabular data, he shouldn't be using a table – robertc Oct 27 '11 at 09:43
I agree with everyone who suggested not using a table for this example :) – Rob Oct 27 '11 at 09:57

Vertically Center a Div

4 Answers4

Linked