怎么把文字放在图片中间答案

【问题标题】：how to put text on the middle of an image怎么把文字放在图片中间
【发布时间】：2011-06-02 15:01:36
【问题描述】：

嗨使用 CSS，我试图将一些文本放在图像上，使其看起来像这样。

<div>
-------
|P    |
|  I  | This is some text.
|    C|
-------
</div>

我怎样才能达到这个结果？不知道这是否有帮助，图像是 32x32 像素。

【问题讨论】：

标签： css image text

【解决方案1】：

img { vertical-align: middle; }

（尽管您可能需要更具体的选择器）和

<div>
<img alt="…" src="…" height="32" width="32"> This is some text.
</div>

【讨论】：

【解决方案2】：

使用css属性（在图片上）vertical-align:middle;

如果中间不符合要求，尝试看看哪种字体适合您的字体和字体大小。

这里是full list of values

【讨论】：

【解决方案3】：

图片可以做背景吗？如果是这样，请尝试

<div style="line-height: 32px; padding-left: 32px; background: url('PIC');">This is some text</div>

【讨论】：

【解决方案4】：

只需应用 vertical-align:middle;图像

这是代码示例

http://www.templatespoint.com/blog/2010/12/text-align-vertically-middle-beside-the-image/

【讨论】：

【解决方案5】：

我会让 div 将您的图像作为背景，然后输入您的文本，将其居中并添加一些填充或边距以将其向下移动并完美居中。

例如

div     {
    width:32px;
    height:21px;
    padding-top:11px;
    text-align:centre;
    font-size:10px;
    background:url(yourImageURL) no-repeat;
}

您可能只需要调整填充、高度和/或字体大小即可获得完美的垂直中心

【讨论】：