Единственный способ выравнивания изображений и текста по вертикали внутри div, который возможен через абсолютное/относительное позиционирование?Выравнивание изображений и текста по вертикали внутри div
Мне нужно сделать это, и я стараюсь использовать как можно меньше классов/хаков.
Это единственный способ сделать вид: table-cell; вертикально-Align: средний ;?
Пример кода:
http://jsfiddle.net/ndreckshage/UYxXG/
Опубликован выше в комментариях, но этот код работает для всех, кто заинтересован --->
Вертикальное выравнивание является одним из способов, абсолютное/относительное позиционирование является другим, но есть также атрибут HTML выравнивание. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align
По моему мнению, добавление к вашему css с вертикальным выравниванием является самым умным способом.
.test
vertical-align: middle;
Один из способов сделать это состоит в использовании дисплея: таблица-клеток с вертикального выравнивания: среднего.
Смотрите пример:
Одна из проблем этого метода, является то, что свойство «таблица-клетка» не поддерживается IE7.
Я видел этот подход в google/so при поиске решения, но моя главная проблема с ним (не заботьтесь о ie7) состоит в том, что элементы сгруппированы как один, поэтому, если это значок значка текста, они будут казаться зубчатыми, как в своем jsfiddle. – ndreckshage
так, чтобы перефразировать - я хочу, чтобы каждое отдельное изображение/текст было сосредоточено внутри контейнера div, поэтому изображения/текст выглядят хорошо вместе. я знаю, что это можно сделать с относительным/абсолютным позиционированием легко, просто надоело создавать так много дополнительных хакеров, когда это нужно решать проще (на мой взгляд) – ndreckshage
У Криса Койера есть отличная статья о CSS-трюках, которая показывает, как центрировать один и многострочный текст по вертикали с помощью css. http://css-tricks.com/vertically-center-multi-lined-text/
http://jsfiddle.net/UYxXG/1/ –
предыдущих работ, но я думаю, мне нравится решение, с которым я столкнулся -> http://jsfiddle.net/ndreckshage/7SV9f/ – ndreckshage