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

Posted 2023-03-05

【中文标题】div表格单元格垂直对齐不起作用

【英文标题】：Div table-cell vertical align not working

【发布时间】：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;

我做错了什么？

【参考方案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

【讨论】：

如果您需要流体/动态高度以及位置：绝对/浮动包装器，请参阅此技巧***.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】：

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