Вертикально центрирование текста Выравнивание

Хорошо, вот что это HTML элементы выглядит как прямо сейчас:Вертикально центрирование текста Выравнивание

enter image description here

Я хотел бы, чтобы текст центрируется с изображением. Изображение 32x32px.

Вот мой код:

<style> 
div.interface { 
    line-height: 32px; 
    float: left; 
    margin: 10px; 
    width: 450px; 
    font: 14px/27px 'CalibriRegular', Arial, sans-serif; 
    color: #646464; text-shadow: 1px 1px 1px #fff; 
    padding-right: 10px; 
} 
</style> 

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy! Complete with Retina graphics.</div>

источник

2011-02-10 sudo rm -rf

проверки этого вопрос из: HTTP : //stackoverflow.com/questions/4414034/how-to-vertically-align-elements-in-html/4414069#4414069 – JCOC611

@JCOC: Похоже, именно то, что мне нужно. Извините, я не искал достаточно. Мог бы также дублировать ваш ответ здесь, чтобы я мог принять ответ. :) –

Нет, все в порядке! Я скопировал свой ответ и немного отредактировал, чтобы больше соответствовать вашей ситуации! – JCOC611

Для центрирования текста по вертикали установить высоту строки к тому же, как высота, например:

img{ height: 30px; } 
#text{ line-height: 30px; }

и установить вертикальную юстировку до середины:

#text{ line-height: 30px; vertical-align:middle; }

источник

2011-02-10 03:10:00 JCOC611

Спасибо вам обоим. Я согласен с ответом JCOC, потому что он дал правильный ответ первым. Приходите, как только это доступно. Благодаря! –

, который должен быть 'vertical-align: middle;' – stephenmurdoch

и что это? jk Я отредактировал его. – JCOC611

Добавить style="vertical-align: middle" в свой <img /> теге.

См. http://phrogz.net/CSS/vertical-align/index.html для полного объяснения тега vertical-align.

источник

2011-02-10 03:07:54 LucasTizma

Спасибо за ваш ответ! :) –

Это лучший ответ. –

Вертикально центрирование текста Выравнивание

ответ

Смежные вопросы