Вертикальное позиционирование строчных элементов

понедельник, 13 апреля 2009

23:15

Вертикальное позиционирование строчных элементов

Joshuan

Блюз - это когда хорошему человеку плохо, потому что он вспоминает о женщине с которой расстался.

Начну публиковать записи с небольшими уроками вариантов HTML-вёрстки и подобного.
Это не столько для Вас, мои немногочисленные читатели, сколько для меня...

Сегодня разберём пример как в блочном элементе <p> разместить текст и картинку, высоты, отличной от высоты текста на одном уровне по вертикали.

 <p>Текст <img src="image.gif" /></p>

Посколько <p> является строчным элементом, то мы не можем применить к нему css-свойство vertical-align: middle; как в случае с ячейками таблицы. Поэтому будем хитрить. Но для этого нам понадобится изначально знать высоту текста и высоту картинки. И допишем к этому следующий css код:

p { padding: 5px; text-align: center; font-size: 10pt; }
p img { position: relative; top: 3pt; }

Необходимо рассчитаться параметр top у изображения. По формуле:

Top = - ( ( font-size / 2  ) - ( img:height / 2 ) ) / 2

Где, font-size - размер шрифта нужного текста, img:height - высота нашего изображения.
Важным ключом тут является "position: relative", которое говорит о том, что элмент находится там, где он должен нахолдиться по умолчанию, но сдвинут в любую сторону (в данном случае "top" вверх) на заданное число. И ещё важно помнить, что top нужно указывать в той же величине, в которой указан размер шрифта.

Завтра добавлю иллюстрации.

@темы: Вёрстка