0

JsFiddleに例があります。

簡単な説明:ただし、将来的にDivは300x300500x500 または 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*/
}

フィドル

タグで css3 を指定したので calc を使用する

IE9 未満のサポートがないために calc を使用しない場合は、最上位の値をheight of the container/2-height of paraie hereのように指定できます。top: 100px;

于 2013-07-11T04:21:42.800 に答える
0

display:table-cell; vertical-align:middle;カバー価格クラスに追加するだけでよいはずです。

于 2013-07-11T04:19:34.370 に答える
0

スパンと通常のパディングを試しましたか??

<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 に答える