我遇到了一些麻烦,试图div
用height:100%
里面的包裹来创建一个display:table-cell
。
我注意到它在Firefox和IE 9中不起作用。
你可以注意到它可以按照预期的方式运行,或者Chrome或者Opera。
代码有什么问题?
有什么办法解决它?
我想保留display:table
和display:table-cell
,以便将内容垂直居中在可变高度容器上。
<div class="table">
<div class="table-cell">
<div class="content"></div>
</div>
</div>
body, html {
margin:0;
padding:0;
height:100%;
}
.table {
display:table;
width:100%;
height:100%;
}
.table-cell {
display:table-cell;
vertical-align: middle;
width:100%;
}
.content {
height: 100%;
display: block;
overflow: hidden;
position: relative;
background: url(http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg);
background-size:cover;
}
发布于 2018-03-13 16:59:32
为了height:100%
工作,所有的父容器必须是height:100%
。如果你注意到,你的.table-cell
风格没有height:100%
。
添加这种风格可以解决Firefox中的问题:
.table-cell {
display:table-cell;
vertical-align: middle;
width:100%;
height:100%;
}
作为替代方案,将图像添加到HTML而不是CSS background-image
也可能起作用。
body, html {
margin:0;
padding:0;
height:100%;
}
.table {
display:table;
width:100%;
height:100%;
}
.table-cell {
display:table-cell;
vertical-align: middle;
width:100%;
}
.content {
height: 100%;
display: block;
overflow: hidden;
position: relative;
background-size:cover;
}
.content img {
width:100%;
height:100%;
}
<div class="table">
<div class="table-cell">
<div class="content">
<img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>
</div>
</div>
</div>
<div class="content">
<img src="...your image url..." />
</div>
.table-cell {
display:table-cell;
vertical-align: middle;
width:100%;
}
.content img {
width:100%;
height:100%;
}
发布于 2018-03-13 17:50:31
你必须设置.content
和.table .table-cell
类别如下
.content {
display: table;
height: 100%;
}
.table, .table-cell {
height: 100%;
}
https://stackoverflow.com/questions/-100004250
复制相似问题