Вертикально выравнивание по центру текста
Хорошо, вот как выглядят эти 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>
Ответы
Ответ 1
Чтобы центрировать текст по вертикали, установите высоту линии так же, как высоту, например:
img{ height: 30px; }
#text{ line-height: 30px; }
И установите вертикальное выравнивание в среднее:
#text{ line-height: 30px; vertical-align:middle; }
Ответ 2
Добавьте style="vertical-align: middle"
в тэг <img />
.
См. http://phrogz.net/CSS/vertical-align/index.html для полного объяснения тега vertical-align
.