css 单元格顶部对齐,CSS-Div表单元格垂直对齐不起作用

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：

Content goes here

看到

垂直居中的示例

和

CSS：将事物居中。

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

9 votes

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

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

长答案：这是一个展示基本知识的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

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

My content

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

.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包裹它

例如：

Hai i'm center here Lol

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;的情况下，用另一个包装器将其漂浮起来，它的工作原理是：

I am vertically aligned on your right! ^^

Antonio Ooi answered 2019-11-18T01:03:24Z