Question

您好使用CSS我试图将一些文本放在图像中心，所以它看起来像这样。

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

如何实现这一结果？不知道是否有帮助，图像为32x32像素。

Answer 1

img { vertical-align: middle; }

（虽然你可能想要一个更具体的选择器）和

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

Answer 2

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

如果中间不适合该帐单，会尝试查看适用于您的字体和字体大小的内容。

以下是full list of values

Answer 3

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

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

Answer 4

只需应用vertical-align：middle;成像

以下是代码示例

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

Answer 5

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

e.g。

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

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

如何将文本放在图像的中间

5 个答案: