怎么把文字放在图片中间

Posted 2023-03-06

【中文标题】怎么把文字放在图片中间

【英文标题】：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 像素。

【参考方案1】：

img  vertical-align: middle; 

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

<div>
<img  src="…"  > 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;

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