выравнивание изображений с текстом

Question

Я хочу по центру выровнять изображение высотой 18px с текстом рядом с ним. Вот код, который я использую:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

С этим кодом контейнер div отображается с высотой 19px вместо 18px, а текст не центрируется с изображением. Я пробовал на Safari 4 и Firefox 3.6. В чем причина этого 1 px?

Спасибо

Answer 1

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

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

это сместит изображение вверх на 2 пикселя от того места, где оно было изначально.

Answer 2

1. Не забудьте сбросить стили (поле / отступ): div, img, span { Маржа: 0; обивка: 0; граница: 0}
2. Для вертикального выравнивания, ваш элементы должны me inline.
3. Классический выбор для выравнивания текста вертикально, чтобы дать высоту линии равно контейнеру.

Например:

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>

Answer 3

Может быть, у вас где-то есть граница, от которой нужно избавиться или установить нулевую ширину?