[英]vertical-align middle not working on table-cell
An element with display:table-cell
ignores min-width
and min-height
. 具有display:table-cell
的元素将忽略min-width
和min-height
。 You have to use height
and width
instead. 您必须改用height
和width
。
Also, if you want to position the element using position:absolute
, you wrap the element in a container, and assign position:absolute
to this container. 另外,如果要使用position:absolute
定位元素,请将元素包装在容器中,然后将position:absolute
分配给此容器。
See this fiddle: http://jsfiddle.net/4Ly4B/3/ 看到这个小提琴: http : //jsfiddle.net/4Ly4B/3/
The property vertical-align doesn't work with min-height . 属性vertical-align不适用于min-height 。 Remove min-height and add padding instead of it. 删除最小高度并添加填充代替它。
.message{
background-color: gray;
position: absolute;
padding-top: 40px;
padding-bottom: 40px;
min-width: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
vertical-align: middle; 垂直对齐:中间; it's basicall used for table-cell.in your example position is absolute this way u can do this 它基本上是用于table-cell的。在您的示例位置中,这种方式是绝对的,您可以执行此操作
.message{
background-color: gray;
position: absolute;
min-width: 200px;
display: table-cell;
padding:60px 0px 60px 0px;
text-align: center;
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.