Выравнивание текста по центру рядом с изображением? - PullRequest
1 голос
/ 22 ноября 2010

У меня есть такой столбец таблицы, где я хочу выровнять изображение и текст.Текст должен быть посередине изображения.

<td><img height='50px' src='blabla'>Hello</td>

Выше приведено выравнивание текста внизу изображения.

Я также попытался добавить vertical-align:middle к стилю tdсвойство, без везения.

Я также попытался добавить <font> и стилизацию этого к vertical-align:middle без везения.

Я знаю один способ, и это добавление еще одного столбца таблицы иимея текст и изображение в отдельных столбцах, можно было бы выровнять текст по центру по вертикали, но я пытаюсь этого избежать.

Есть идеи?

Ответы [ 5 ]

4 голосов
/ 22 ноября 2010

Вы должны добавить vertical-align к img, а не td:

<td>
  <img style="vertical-align: middle;" src="test.jpg"/>
  test
</td>

Чтобы применить стиль ко всем изображениям за td с, используйте внешний CSS:

td img {
  vertical-align: middle;
}
0 голосов
/ 22 ноября 2010

используйте vertical-align:middle на изображении, а не td

td img{
vertical-align:middle;
}

рабочий пример при http://www.jsfiddle.net/gaby/pPVtH/

0 голосов
/ 22 ноября 2010

Добавьте выравнивание по вертикали и к строке, а не только к ячейке.

0 голосов
/ 22 ноября 2010

Вот, пожалуйста:

<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>

http://jsfiddle.net/FDRy8/

0 голосов
/ 22 ноября 2010

Вы пытались использовать valign = "middle"

<td valign="middle"><img height='50px' src='blabla'>Hello</td>

Кроме того, нет необходимости добавлять "px" к высоте изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...