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

Question

Этот вопрос затоплен в изобилии по всему Интернету, но каждый раз, куда я иду, я не пытаюсь его реализовать.

Сначала код. Я потратил более часа на это и не смог выровнять изображения так, как хотел. По существу, первая строка имеет выравнивание изображения и текст рядом с ним, по центру по вертикали. Next 'row', выравнивание по картинке с вертикальной ориентацией текста.

Here's the jsfiddle

я потратил 5 минут на этом, используя таблицу, чтобы получить его, как я хотел.

table jsfiddle

Если вы можете выяснить, как сделать два выглядят одинаково, то вы суперзвезда в моей книге. Если вы можете это решить, тогда кто-то может рассказать мне, почему в черт он так freakin трудно выровнять или ориентировать текст в мире сегодня CSS? Зачем использовать divs по таблицам? Я чувствую, что стандарты кодирования только усложнились с годами.

Извините за громкие слова, но так как я нашел время, чтобы отправить это, чтобы, возможно, помочь другим, а не дать up..yet, я должен был выпустить пар :)

Answer 1

Вы хотите гибкую структуру, вам следует использовать div. Потому что таблицы фиксированы. Например: нижняя ячейка должна иметь одинаковую ширину с верхней ячейкой. Они не могут отличаться друг от друга. Ячейки таблицы связаны друг с другом. Их нельзя разделить. Поэтому вы должны использовать таблицы для очень простого дизайна. Чтобы это было более ясно, вы должны использовать div для гибкого, сложного, надежного дизайна. Если вам нужно использовать div, вы должны использовать div;)

вы можете сделать то, что хотите сделать с помощью div, таким образом.

http://jsfiddle.net/5aGZj/1/