как поместить текст в середину изображения

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;

Если середина не подходит по размеру, экспериментируйте, чтобы увидеть, что работает с вашим font-face и font-size.

Вот полный список значений

Answer 3

Просто примените вертикальное выравнивание: среднее;к изображению

Вот пример кода

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

Answer 4

Я бы сделал так, чтобы div использовал ваше изображение в качестве фона, затем напечатал бы текст, выровнял его по центру и добавил отступ или поле, чтобы переместить его вниз и идеально отцентрировать.

например

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

Возможно, вам просто нужно отрегулировать отступы, высоту и / или размер шрифта, чтобы получить идеальный центр вертикальной линии

Answer 5

Может ли изображение быть фоном?Если это так, попробуйте

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