Центр выравнивания текста подвергается воздействию элементов с плавающей точкой

У меня есть два элемента float, справа и слева.

Родительский элемент для всех из них является text-align: center, margin: auto.

Пожалуйста, смотрите здесь:

http://jsfiddle.net/KRWNs/

Если вы видите текст 1., там находится центр. 2. Текст перемещается (будучи затронутым от элементов float) влево, как вы можете видеть, и не является центром.

Как я могу сделать это выравнивание как нормальное выше (как текст 1.), без влияния элементов float на правой и левой стороне?

спасибо вперёд

ОТВЕТЫ

Ответ 1

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

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

Тот факт, что внешний элемент является "margin auto", не имеет значения.

Ответ 2

Если вы не можете играть с абсолютными позициями, как в моем случае, так как я работаю над печатаемой страницей и абсолютным выводит весь контент из страницы, вы можете играть с полями. Просто напишите, что вы хотите в разных строках, а затем для контента, который хотите выровнять вправо/влево, добавьте отрицательный верхний край (или снизу, если вы написали его вверху).

Используя пример Phrogz:

<div class="test">
      <div id="s0">
      1. text<br />
      2. text
   </div>
   <div id='s1'>999</div>
   <div id='s2'>Follow me</div>
</div

с помощью css:

.test{
    width: 500px;
    text-align: center;
    background: yellow;
    line-height: 18px;
}

#s1 { text-align: right; margin-top: -18px; }
#s2 { text-align: left;  margin-top: -18px; }

Вы можете увидеть рабочий пример здесь