У меня есть два элемента float, справа и слева.
Родительский элемент для всех из них является text-align: center, margin: auto.
Пожалуйста, смотрите здесь:
Если вы видите текст 1., там находится центр. 2. Текст перемещается (будучи затронутым от элементов float) влево, как вы можете видеть, и не является центром.
Как я могу сделать это выравнивание как нормальное выше (как текст 1.), без влияния элементов float на правой и левой стороне?
спасибо вперёд
Вам нужно использовать что-то другое, кроме float, чтобы привязать элементы к бокам. Как бы то ни было, они ведут себя так, как должны. Здесь обновленный пример, используя абсолютное позиционирование, чтобы придерживаться сторон. Однако очень длинный контент не будет чтить элементы.
В качестве альтернативы, как показано в этот тест, вам необходимо убедиться, что оба поплавка имеют одинаковую ширину.
Тот факт, что внешний элемент является "margin auto", не имеет значения.
Если вы не можете играть с абсолютными позициями, как в моем случае, так как я работаю над печатаемой страницей и абсолютным выводит весь контент из страницы, вы можете играть с полями. Просто напишите, что вы хотите в разных строках, а затем для контента, который хотите выровнять вправо/влево, добавьте отрицательный верхний край (или снизу, если вы написали его вверху).
Используя пример 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; }
Вы можете увидеть рабочий пример здесь