Div table-cell vertical align not working

css html alignment
mattgcon picture mattgcon · Oct 23, 2010 · Viewed 203.2k times · Source

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?

Answer

meder omuraliev picture meder omuraliev · Oct 23, 2010

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

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More