div表格单元格垂直对齐不起作用答案

【问题标题】：Div table-cell vertical align not workingdiv表格单元格垂直对齐不起作用
【发布时间】：2011-04-29 15:38:04
【问题描述】：

我正在尝试使用 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;
}

我做错了什么？

【问题讨论】：

标签： css html alignment

【解决方案1】：

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

【讨论】：

它们之间可能还有一个display: table-row 元素。
等等.. 你让它们飘起来了。去掉浮子？请发布一个jsfiddle。您可能想改用inline-block。不过，它有助于查看视觉效果。
@mattgcon, display: table-cell 工作，并允许在 Chrome 和 Firefox 中使用 vertical-align 而不会出现任何问题（在 Ubuntu 10.10 上）：JS Fiddle demo。但是，在 display: table-cell 元素上使用 float 确实会破坏这种能力：JS Fiddle demo with float
如果您将其绝对定位，也会出现同样的问题。
啊，我们为了避免只使用一张桌子而做的事情......

【解决方案2】：

您可以以适用于 IE 6+ 的方式垂直对齐浮动元素。它也不需要完整的表格标记。这种方法并不完全干净 - 包括包装器，并且有一些事情需要注意，例如如果你有太多的文字超出容器 - 但它非常好。

简短回答：您只需将display: table-cell 应用于浮动元素内部的元素（表格单元格不浮动），并使用@ 的后备987654326@ 和 top 用于旧 IE。

长答案：这是jsfiddle showing the basics。总结的重要内容（带有添加 .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 that deliberately highlight the minor faults。注意方法：

在标准浏览器中，超过包装元素高度的内容会停止居中并开始向下移动。这不是一个大问题（可能看起来比爬上页面更好），并且可以通过避免太大的内容来避免（请注意，除非我忽略了某些东西，否则像 overflow: auto; 这样的溢出方法似乎不会工作）
在旧版 IE 中，内容元素不会拉伸以填充可用空间 - 高度是内容的高度，而不是容器的高度。

这些都是很小的限制，但值得注意。

Code and idea adapted from here

【讨论】：

如果您需要流体/动态高度以及位置：绝对/浮动包装器，请参阅此技巧stackoverflow.com/a/7256012/568458

【解决方案3】：

这就是我的做法：

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>

见

Example of vertical centering

和

CSS: centering things.

【讨论】：

这仅在元素不浮动时有效。提问者的 Blackbox 元素有 float:left;这就是问题所在。
容易忘记html上的height: 100%

【解决方案4】：

因为你还在用float...

尝试删除“float”并用 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>

【讨论】：

这个。表格单元格不能浮动。

【解决方案5】：

设置父元素的高度。

【讨论】：

【解决方案6】：

在不使用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>

【讨论】：

【解决方案7】：

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

应该设置父元素为

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

【讨论】：

【解决方案8】：

有时浮动会阻碍垂直对齐，最好避免它们。

【讨论】：

【解决方案9】：

如下样式的元素将垂直居中对齐：

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

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

【讨论】：

【解决方案10】：

在我的例子中，我想在一个父容器中居中位置：绝对。

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

【讨论】：

【解决方案11】：

只需从设置了表格单元格的元素中删除浮动。

【讨论】：