CSS-Div表单元格垂直对齐不起作用

我试图使用DIV简单地将文本水平和垂直居中,并将显示类型作为表格单元格显示,但在IE8或Firefox中均不起作用。

下面是我正在使用的CSS,这就是html页面中的全部内容。

@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;
}

我究竟做错了什么?

mattgcon asked 2019-11-18T00:57:47Z
10个解决方案
43 votes

我认为table-cell需要有一个父级display:table元素。

meder omuraliev answered 2019-11-18T00:58:13Z
39 votes

我是这样做的:

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>

看到

垂直居中的示例

CSS:将事物居中。

Shaquin answered 2019-11-18T00:58:52Z
9 votes

您可以使用在IE 6+上有效的方式垂直对齐浮动元素。 它也不需要全表标记。 这种方法不是很干净-包括包装器,还有一些需要注意的地方,例如 如果您有太多文字超出了容器的范围-那就很好了。


简短的答案:您只需将overflow: auto;应用于浮动元素内的元素(表单元格不浮动),并对旧IE使用后备选项position: absolutetop


长答案:这是一个展示基本知识的jsfiddle。 总结了重要的内容(添加了.old-ie类的条件注释):

    .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;
    }

这是一个jsfiddle,它故意突出显示此方法的次要错误。 注意如何:

  • 在标准浏览器中,超出wrapper元素高度的内容将停止居中并开始向下移动页面。 这不是一个大问题(看起来比爬动页面更好),可以通过避免太大的内容来避免(请注意,除非我忽略了某些内容,否则类似overflow: auto;的溢出方法似乎无效)
  • 在旧的IE中,content元素不会拉伸以填充可用空间-高度是内容的高度,而不是容器的高度。

这些是相当小的限制,但值得注意。

从这里改编的代码和想法

user568458 answered 2019-11-18T01:00:05Z
6 votes

样式如下的元素将垂直对齐到中间:

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

但是,父元素必须具有固定的高度。看到这个小提琴:[https://jsfiddle.net/15d0qfdg/12/]

gm2008 answered 2019-11-18T01:00:36Z
5 votes

看到这个垃圾箱:[http://jsbin.com/yacom/2/edit]

应该将父元素设置为

display:table-cell;
vertical-align:middle;
text-align:center;
Xieranmaya answered 2019-11-18T01:01:07Z
5 votes

就我而言,我想在位置为:绝对的父容器中居中。

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

我必须为顶部,底部,左侧和右侧添加一些位置。

.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
}
A. D'Alfonso answered 2019-11-18T01:01:38Z
3 votes

因为您仍在使用浮动...

尝试删除“浮点”并用display:table包裹它

例如:

<div style="display:table">
 <div style="display:table-cell;vertical-align:middle;text-align:center">
       Hai i'm center here Lol
 </div>
</div>
Strikersz7 answered 2019-11-18T01:02:10Z
2 votes

有时浮动制动器会垂直对齐,最好避免它们。

Munteanu Sergiu answered 2019-11-18T01:02:34Z
1 votes

设置父元素的高度。

bhaity answered 2019-11-18T01:02:59Z
1 votes

在不使用display: table;的情况下,用另一个包装器将其漂浮起来,它的工作原理是:

<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>
Antonio Ooi answered 2019-11-18T01:03:24Z
translate from https://stackoverflow.com:/questions/4005309/div-table-cell-vertical-align-not-working