DIV表单元格垂直对齐不工作

问题描述

我想简单地中心的文字水平和垂直使用DIV和显示类型为表单元格，但它不工作在任何IE8或Firefox浏览器。

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.

下面是我使用的CSS，这是所有在HTML页面。

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?

推荐答案

我觉得表单元格需要有一个父显示：表元素。

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

这篇关于DIV表单元格垂直对齐不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！