Очень странно до сих пор наблюдать картинки, выравненные при помощи относительного позиционирования.
Не открою Америку, сказав, что для вертикального выравнивания картинки внутри, скажем, строки текста, существует известное всем css-свойство vertical-align.
Все гениальное просто:
img {
vertical-align:middle;
}Строго говоря, у vertical-align есть весьма интересные значения. Не поленитесь заглянуть в спецификацию и попробовать на практике.
dv5ife // 7 октября 2006 в 02:16
Эх.. вот, сколько раз пытался его использовать – не работает. А жаль.
Или, может быть, работает, но только для img? Так, должно ведь, вроде, для любых блоков…
Странно, короче.
Flack // 9 октября 2006 в 12:33
Возможно, вы пытались использовать vertical-align для блочных элементов.
‘vertical-align’
Initial: baseline
Applies to: inline-level and ‘table-cell’ elements
Украина // 25 октября 2006 в 10:42
Для любых блоков вроде работает…
just guest // 5 ноября 2006 в 17:56
>>>Не поленитесь заглянуть в спецификацию
во во, и автору не мешало бы заглянуть туда ;)
«Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.»
это значит, что картинка не будет по центру строки (хотя для больших картинок это не так заметно, как, скажем для картинки 10х10 px при размере шрифта 14px
Flack // 5 ноября 2006 в 19:20
Этого в 90% случаев хватает.
akella // 6 ноября 2006 в 11:21
2just guest: “baseline of the parent box plus half the x-height of the parent”
а разве это не значит что центр картинки будет на половину высоты шрифта вверх от baseline – то бишь по вертикальному центру строки?
Или я не умею считать?
Николай, дизайн студия ControlStyle // 21 декабря 2006 в 08:23
Интересно, спасибо за инфу.
warmrobot // 4 января 2007 в 01:58
+ для содержащего элемента задать word-spacing:-3px; Чтобы горизонтальных зазоров не было между изображениями.
Пытался задавать это дело в em… Два изображения стоят в притирочку, а вот третье все равно слева отходило на 1px. Так что пусть уж будет -3px.
andtim // 25 февраля 2007 в 22:50
Очень частенько использую только для ячеек таблиц.
Для картинок margin-bottom: :)