Позиционирование CSS - плавающая левая и центрированная проблема
Вопрос
Я уверен, что это основной вопрос для тех из вас, кто регулярно работает в HTML и CSS.
У меня есть две части текста, оба должны появиться на одной линии - нужно оставить выровненное, а другой должен быть центрирован, независимо от того, сколько текста находится в левом блоке (очевидно, пока длина Текст с левой частью не распространяется на полпути).
Чтобы это было проще для понимания и тестирования, я включил образец. В моем примере у меня есть то, что мне нужно, но на 2 строках вместо той же строки.
Пожалуйста, репост Рабочий образец, если вы найдете решение.
Спасибо.
<html>
<head>
<title>Alignment Test</title>
<style>
body {background-color: #E6E6E6;}
#reference {width: 100%;
border: solid 1px navy;}
#half1 {width: 50%;
text-align: right;
border-right: dotted 1px navy}
#container {width: 100%;
text-align: center;
border: solid 1px navy;}
#floatLeft {float:left;
border: dotted 1px green;
background-color: #D0F5A9;}
#centered {width: 100%;
border: dotted 1px red;
background-color: #F5F6CE;}
</style>
</head>
<body>
<div id="reference">
<div id="half1">Middle of container --> </div>
<div id="half2"></div>
</div>
<div id="container">
<div id="centered">This text should be centered
<div id="floatLeft">This text should be left aligned</div>
</div>
</div>
</body>
Решение
<div style="text-align:center;position:relative">
Centered
<div style="position:absolute;left:0;top:0">Left</div>
</div>
Другие советы
Решение Ю. Шохама работает. Вот еще один, который обрабатывает более изящное обертывание контента (не допускает перекрытие между центральной и левой секцией), но требует изменения порядка элементов в разметке:
<div style="text-align: center; overflow: auto;">
<div style="float: left; text-align: left;">left</div>
centered
</div>
( text-align: left
не может иметь значение, например, если ширина не указана и ничто внутри не имеет внутренней ширины, как изображение.)