Есть ли способ иметь левый, центральный и правый выровненный текст в одной строке с HTML/CSS при следующих условиях?
- Левая и правая части текста будут короткими, но я не знаю их длины заранее.
- Центральная часть текста может быть достаточно длинной для обертывания.
- Центральная часть текста должна отображаться ТОЧНО в центре.
- Центральная часть текста не должна перекрывать левую или правую часть текста.
Очевидное решение использовать 3 divs с двумя из них, плавающее влево и вправо, работает очень хорошо, за исключением того, что центральная часть текста не центрирована точно (например, если левый фрагмент текста длиннее правого, центр оказывается центрированным справа от абсолютного центра).
Мне нужно только решение, которое работает на WebKit. Любые идеи?
Изменить. Это то, что у меня есть до сих пор...
HTML:
<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>
CSS
#left {
float: left;
text-align: left;
padding-right: 10px;
}
#center {
text-align: center;
}
#right {
float: right;
text-align: right;
padding-left: 10px;
}