Элементы CSS 3, выровненные по вертикали {слева, по центру, справа}, плавающие

Question

вот рабочая скрипка:

http://jsfiddle.net/2bNsC/67/

Мне нужно разместить 3 элемента (текст и 2 изображения), выровненные по вертикали (это нормально), но правая картинка должна быть закреплена справа, а текст центрирован

Хороший CSS

Answer 1

Теги SPAN имеют такую ​​же ширину, как и их содержимое, поэтому установка чего-либо по центру не имеет никакого смысла.

Вместо этого используйте DIV (блочный элемент). Блочные элементы имеют такую ​​же ширину, как и их КОНТЕЙНЕРЫ.

<div style="text-align: center;">  Lorem </div> 

Один хороший трюк, добавьте фоновый цвет или границу к элементу, чтобы вы точно видели, где он находится в макете. Это очень удобно при отладке подобных проблем.

<div style="text-align: center;border:1px solid #ff0000">  Lorem </div>

Answer 2

вам не нужны все эти причудливые css-правила и элементы-обертки, достаточно простого vertical-align. (см. Здесь) .

Поскольку интервалы являются встроенными элементами, они сворачиваются, чтобы соответствовать содержанию, и поэтому текст не может быть центрирован. Вы также не можете использовать элемент уровня блока, это нарушит ваш макет.

Вам нужно либо применить display:inline-block; и добавить width, либо использовать плавающие элементы для макета.