Выравнивание изображений и текста по вертикали внутри div

Возможен ли единственный способ выравнивания изображений и текста по вертикали внутри div с помощью абсолютного/относительного позиционирования?

Мне нужно это сделать, и я стараюсь использовать как можно меньше классов/хаков.

Единственный другой способ сделать так, как display:table-cell; вертикальное выравнивание: посередине;?

Пример кода:

http://jsfiddle.net/ndreckshage/UYxXG/


vertical-alignment html css positioning
person ndreckshage    schedule 21.06.2012    source источник
comment
предыдущие работы, но я думаю, что мне нравится решение, которое я придумал --› jsfiddle.net/ndreckshage/7SV9f   -  person ndreckshage    schedule 22.06.2012

Ответы (4)


arrow_upward
2
arrow_downward

Один из способов сделать это — использовать display: table-cell с vertical-align: middle.

См. пример:

http://jsfiddle.net/UYxXG/3/

Одна проблема с этим методом заключается в том, что свойство table-cell не поддерживается IE7.

person w00    schedule 21.06.2012
comment
да, я видел этот подход в google/so при поиске решения, но моя главная проблема с ним (наплевать на ie7) заключается в том, что элементы сгруппированы как один, поэтому, если это текстовый значок значка, они будут выглядеть зубчатыми, как они в вашем jsfiddle. - person ndreckshage; 22.06.2012
comment
поэтому, чтобы перефразировать - я хочу, чтобы каждое отдельное изображение/текст было сосредоточено в контейнере div, чтобы изображения/текст хорошо смотрелись вместе. я знаю, что это можно легко сделать с относительным/абсолютным позиционированием, просто раздражает необходимость создавать так много дополнительных CSS-хаков, когда с этим нужно справиться более простым способом (на мой взгляд) - person ndreckshage; 22.06.2012

arrow_upward
1
arrow_downward

Опубликовано выше в комментарии, но этот код работает для всех, кто заинтересован --->

http://jsfiddle.net/ndreckshage/7SV9f/

person ndreckshage    schedule 24.06.2012

arrow_upward
0
arrow_downward

Вертикальное выравнивание — это один способ, абсолютное/относительное позиционирование — другой, но есть также атрибут выравнивания html. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align

На мой взгляд, добавление в ваш css вертикального выравнивания — самый разумный способ.

.test
vertical-align: middle;
person Cleverbot    schedule 21.06.2012

arrow_upward
0
arrow_downward

У Криса Койера есть отличная статья о хитростях CSS, в которой показано, как центрировать однострочный и многострочный текст по вертикали с помощью css. http://css-tricks.com/vertical-center-multi-lined-text/

person jcypret    schedule 22.06.2012