2

我想在中间的图像上添加一些文本。我使用这段代码：

<div style="background-image: url(../images/game-hearts-icon.png); height: 64px; width: 64px; text-align: center; vertical-align:middle;">text</div>

我希望文本在心脏的中间。但它只是出现在顶部居中。垂直对齐似乎不起作用。我究竟做错了什么？任何帮助表示赞赏！

4

3 回答 3

1

您可以使用绝对定位或行高来达到您想要的结果，方法如下：jsfiddle.net/YZXVe/

于 2013-01-29T03:53:06.990 回答
1

将 设置line-height为等于 div 的高度：

<div style="background-image: url(../images/game-hearts-icon.png); height: 64px; width: 64px; text-align: center; line-height: 64px;">text</div>

更好的是，不要使用内联样式：

HTML

<div class="game-hearts-icon">text</div>

CSS

.game-hearts-icon {
    background: transparent url(../images/game-hearts-icon.png) scroll 0 0 no-repeat;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
}
于 2013-01-29T03:56:17.750 回答
1

您可以<center>在 div 内使用。它会将您的文本垂直和水平放置在中心。

   <div>
    <center>
      <p>Your Text</p>
    </center>
   </div>

希望能帮助到你。

于 2013-01-29T05:05:22.400 回答