html - 在图像上居中文本

Question

这可能很容易做到，但由于某种原因，我没有任何工作。假设我有一个图像和一个像这样的文本：

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

如何Some Text在图像上水平和垂直居中文本（我希望文本出现在图像中间）

谢谢

Answer 1

一种适用于几乎所有浏览器的简单方法是使图像成为 div 的背景图像，然后设置段落的 line-height 属性。请注意，这仅在文本位于一行时才真正有效。

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>​

Answer 2

您可以使用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将文本放置在图像上方。