Question

JsFiddle中有例子。

小描述：Div为300x300但未来可能为500x500或100x100（因此需要灵活的解决方案）background image（size:cover所以不在乎关于大小）。

在此div内，<p>的高度为50px（但未来可能是100px或25px），其内部文字（20）和background-color有点透明（蓝色）。

我希望将其置于此div中，并且sollution应该是灵活的（因此，对于将来的更改，手动修复所有图像/想法不会花费几个小时，因此使用{ {1}}值。

有人有想法吗？

Answer 1

一种方式：

.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*/
}

<强> Fiddle

使用calc，因为您已在标记中指定了css3

如果因IE9以下缺乏支持而未使用计算，则可以将最高值指定为height of the container/2-height of para，即top: 100px;

Answer 2

您应该只需将display:table-cell; vertical-align:middle;添加到保险价格等级即可。

Answer 3

你尝试过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/

Answer 4

    .cover-price{
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    display:table-cell; vertical-align:middle;
}

div中的中心块（段落）

4 个答案: