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

Question

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

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

Вот jsfiddle

Я потратил 5 МИНУТ на эту таблицу, чтобы получить ее так, как я хотел.

таблица jsfiddle

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

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

Answer 1

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

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

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