CSS: Как я могу центрировать текст, несмотря на плавающий элемент рядом с ним?

Question

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

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

Пример (я хочу, чтобы красный текст был в центре синей рамки, несмотря на зеленый текст)

Как этодостигнуто лучшее?

Answer 1

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

Answer 2

Вот ссылка на рабочую скрипку: http://jsfiddle.net/cD657/3/

(в вашем примере вы открыли <span> и закрыли его с помощью </div>)

Я сделал этоdiv и дал ему margin: 0px auto; и ширину.- похоже, сделал трюк

Answer 3

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

.parent{        
    text-align: center;
}
.centered.element{
     padding-left: [width of floating element]px;
}

.floating.element{
     float: left;
}

Чтобы легко найти ширину, просто используйте Developer Tools в любом современном браузере, чтобы Inspect элемент.

См. Скрипку здесь: http://jsfiddle.net/cD657/369/

Примечание: Может не работать, если центрированный элемент имеет назначенный цвет background.