1

これはおそらく非常に簡単に実行できますが、何らかの理由で何も機能していません。次のような画像とテキストがあるとします。

<div id="my_div">
    <img src="my_img.png" alt="Test" />
    <p>Some Text</p>
</div>

テキストを画像の水平方向および垂直方向の中央に配置するにはどうすればよいですかSome Text(テキストを画像の中央に表示したい)

ありがとうございました

4

2 に答える 2

0

使用できますdisplay: table/table-cell：

CSS:

.example {
    display: table;
    width: 100px; /* Width of the image */
    height: 100px; /* Height of the image */
}

.example > P {
    background: url(my_img.png) no-repeat;
    display: table-cell;
    text-align: center; /* Center text horizontally. */
    vertical-align: middle; /* Center text vertically. */
}

HTML:

<div class="example"><p>
    Some text
</p></div>

画像をIMG要素として使用する必要がある場合は、同様のコードを使用して、要素のIMG前に要素を追加し、要素に負margin-topの要素を使用しdisplay:tableて、テキストを画像の上に配置できます。

于 2012-10-11T23:35:36.273 に答える
0

事実上すべてのブラウザーで機能するこれを行う簡単な方法は、画像を div の背景画像にしてから、段落の line-height プロパティを設定することです。これは、テキストが 1 行にある場合にのみ機能することに注意してください。

jsFiddle の例

CSS

#my_div p {
    line-height:200px;
    text-align:center;
    color:white;
}

#my_div {
    background-image: url(http://www.placekitten.com/400/200);
    width:400px;
    height:200px;
}

HTML

<div id="my_div">
    <p>Some Text</p>
</div>​
于 2012-10-12T00:11:08.673 に答える