Div table-cell vertical align not working

Question

I am trying to simply center text horizontally and vertically using DIV and display type as table-cell but it is not working in either IE8 or Firefox.

Below is the CSS that I am using and that is all that is in the html page.

@charset "utf-8";
/* CSS Document */
html, body
{
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}
div.Main
{
    background-color:#FFFFFF;
    border-collapse:collapse;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
div.MainHeader
{
    color:#C00000;
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    width:800px;
}
div.BlackBox
{
    background-color:#000000;
    color:#FFFF00;
    display:table-cell;
    float:left;
    font-size:18pt;
    font-weight:bold;
    height:191px;
    text-align:center;
    vertical-align:middle;
    width:630px;
}
div.BlackBoxPicture
{
    background-color:#000000;
    float:right;
    height:191px;
    margin-top:auto;
    margin-bottom:auto;
    text-align:right;
    vertical-align:bottom;
    width:170px;
}

What am I doing wrong?

score 47 · Answer 1 · answered Oct 23 '10 at 17:55

47

I think table-cell needs to have a parent display:table element.

answered Oct 23 '10 at 17:55

meder omuraliev

183,342
71
393
434

7

And, possibly, a `display: table-row` element between them. – David Thomas Oct 23 '10 at 17:57
12

Wait.. you have them floated. Remove the float? Please post a jsfiddle. You may want to use `inline-block` instead. It helps seeing the visuals, though. – meder omuraliev Oct 23 '10 at 18:03
21

@mattgcon, `display: table-cell` works, and allows `vertical-align` to be used in both Chrome and Firefox without any issues (on Ubuntu 10.10): [JS Fiddle demo](http://jsfiddle.net/davidThomas/8At93/). Using `float` on the `display: table-cell` elements does, however, break that ability it seems: [JS Fiddle demo with `float`](http://jsfiddle.net/davidThomas/8At93/1/) – David Thomas Oct 23 '10 at 18:14
2

Same problem if you have it absolutely positioned. – Sebastian Sulinski Mar 05 '15 at 16:21
Ahh, the things we do to avoid just using a table... – jdgregson Nov 25 '20 at 23:31

score 40 · Answer 2 · answered May 27 '12 at 09:17

40

This is how I do it:

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

HTML:

<div id="content">
    Content goes here
</div>

See

Example of vertical centering

and

CSS: centering things.

answered May 27 '12 at 09:17

Shaquin

409
4
2

6

This works only if the element isn't floated. The asker's Blackbox element has float:left; which is where the problem comes from. – user56reinstatemonica8 Jul 10 '12 at 10:52
Easy to forget the `height: 100%` on `html` – aceofspades Aug 23 '14 at 17:06

user56reinstatemonica8 · Answer 3 · 2013-05-08T15:37:51.890

You can vertically align a floated element in a way which works on IE 6+. It doesn't need full table markup either. This method isn't perfectly clean - includes wrappers and there are a few things to be aware of e.g. if you have too much text outspilling the container - but it's pretty good.

Short answer: You just need to apply display: table-cell to an element inside the floated element (table cells don't float), and use a fallback with position: absolute and top for old IE.

Long answer: Here's a jsfiddle showing the basics. The important stuff summarized (with a conditional comment adding an .old-ie class):

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

Here's a jsfiddle that deliberately highlight the minor faults with this method. Note how:

In standards browsers, content that exceeds the height of the wrapper element stops centering and starts going down the page. This isn't a big problem (probably looks better than creeping up the page), and can be avoided by avoiding content that is too big (note that unless I've overlooked something, overflow methods like overflow: auto; don't seem to work)
In old IE, the content element doesn't stretch to fill the available space - the height is the height of the content, not of the container.

Those are pretty minor limitations, but worth being aware of.

Code and idea adapted from here

If you need a fluid/dynamic height as well as a position: absolute / float wrapper, see this trick http://stackoverflow.com/a/7256012/568458 — user56reinstatemonica8, Nov 25 '13 at 14:47

score 6 · Answer 4 · answered Feb 26 '16 at 10:02

An element styled as follows will be aligned vertically to middle:

.content{
     position:relative;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     top:50%;
}

However, the parent element must have a fixed height. See this fiddle: https://jsfiddle.net/15d0qfdg/12/

score 5 · Answer 5 · answered Apr 24 '14 at 08:29

5

see this bin: http://jsbin.com/yacom/2/edit

should set parent element to

display:table-cell;
vertical-align:middle;
text-align:center;

answered Apr 24 '14 at 08:29

Xieranmaya

792
10
11

score 5 · Answer 6 · answered Oct 30 '16 at 10:43

In my case, I wanted to center in a parent container with position: absolute.

<div class="absolute-container">
    <div class="parent-container">
        <div class="centered-content">
            My content
        </div>
    </div>
</div>

I had to add some positioning for top, bottom, left & right.

.absolute-container {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.parent-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

.centered-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

score 4 · Answer 7 · answered Mar 06 '13 at 08:07

4

Because you still using float...

try to remove "float" and wrap it with display:table

example :

<div style="display:table">
 <div style="display:table-cell;vertical-align:middle;text-align:center">
       Hai i'm center here Lol
 </div>
</div>

answered Mar 06 '13 at 08:07

Strikersz7

41
1

This. table-cell must not be floated. – Ralf Jan 06 '20 at 07:47

score 2 · Answer 8 · answered Dec 03 '13 at 14:52

2

Float it with another wrapper without using display: table;, it works:

<div style="float: right;">
   <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>

answered Dec 03 '13 at 14:52

Antonio Ooi

1,601
1
18
32

score 2 · Answer 9 · answered Jan 22 '15 at 14:42

2

Sometime floats brake the vertical align, is better to avoid them.

answered Jan 22 '15 at 14:42

Munteanu Sergiu

391
1
10

score 1 · Answer 10 · answered Jul 16 '13 at 15:57

1

Set the height for the parent element.

answered Jul 16 '13 at 15:57

bhaity

92
1
8

score 0 · Answer 11 · answered Oct 22 '21 at 22:17

0

Simply remove the float from the element which has table-cell set on it.

answered Oct 22 '21 at 22:17

Chadere Oghenenyoreme

63
1
7

Div table-cell vertical align not working

11 Answers11

Linked