0

JsFiddle中有示例。

小描述：Div是300x300但将来可能是 500x500 或 100x100（所以需要灵活的解决方案）background image（size:cover所以不关心大小）。

里面div有<p>50px 的高度（但将来可能是 100px 或 25px），里面有文本（20），background-color有点透明（蓝色）。

我想将它集中在其中，div并且解决方案应该是灵活的（因此对于未来的更改，手动修复所有图像/想法不需要几个小时，所以使用%值会很酷。

有人有想法吗？

4

4 回答 4

3

单程：

.cover-price{
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    position:relative; /*Make container relative*/
}

.cover-price p{
    line-height: 50px;
    width: 100%;
    height: 50px;
    background-color: rgba(43,32,122, .3);
    color: pink;
    position:absolute; /*make P absolute*/
    top: calc(50% - 50px); /*give top as 50% - height of p*/
}

小提琴

使用 calc 因为您在标签中指定了 css3

如果不使用 calc 因为缺乏对 IE9 的支持，您可以在height of the container/2-height of para此处指定最高值top: 100px;

于 2013-07-11T04:21:42.800 回答
0 
    .cover-price{
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    display:table-cell; vertical-align:middle;
}
于 2013-07-11T04:59:08.003 回答
0

您应该能够添加display:table-cell; vertical-align:middle;到您的保险价格等级。

于 2013-07-11T04:19:34.370 回答
0

您是否尝试过 Span 和普通填充？

<p><span class="price">20.0 </span></p>

.cover-price p{
line-height: 50px;
width: 100%;
height: 50px;
/*background-color: rgba(43,32,122, .3);*/
color: pink;
padding-top : 45%;
position: relative;
}

.price{
background-color: rgba(43,32,122, .3);
}

http://jsfiddle.net/BZGhU/13/

于 2013-07-11T04:33:19.893 回答