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

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

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

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

Как это достигается?

Ответ 1

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

Ответ 2

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

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

Я сделал его div и дал ему margin: 0px auto; и ширину. -используется трюк

Ответ 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.