Question

这可能很容易做到，但出于某种原因，我没有任何工作。让我们说我有一个图像和文字这样：

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

如何将文本Some Text水平和垂直居中放置在我的图像上（我希望文本显示在图像的中间）

谢谢

Answer 1

您可以使用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在图像上方定位文字。

Answer 2

在几乎所有浏览器中都可以使用的简单方法是使图像成为div的背景图像，然后设置段落的line-height属性。请注意，只有当文本在一行时才能正常工作。

<强> jsFiddle example

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

图像中心文本

2 个答案: