Выровненный слева, по центру и справа текст на одной строке

Question

Есть ли способ разместить текст по левому, центральному и правому краю на одной строке с HTML / CSS при следующих условиях?

1. Левый и правый фрагменты текста будут короткими, но я заранее не знаю их длины.
2. Центральный фрагмент текста может быть достаточно длинным для переноса.
3. Центральный фрагмент текста должен находиться ТОЧНО в центре.
4. Центральный фрагмент текста не должен перекрывать левый или правый фрагменты текста.

Очевидное решение использования 3-х div с двумя плавающими влево и вправо работает довольно хорошо, за исключением того, что центральная часть текста не центрирована точно (например, если левая часть текста длиннее правой центр кажется центром прямо справа от абсолютного центра).

Мне нужно только решение, которое работает на 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;
}

Answer 1

решение с прозрачными делениями

https://jsfiddle.net/LaL92q88/1/

<div style="float: left">Left Text</div>
<div style="float: right">Right Text</div>
<div style="margin: 0 auto; width: 100px;">Centered Text</div>

Answer 2

Вам нужно будет «обмануть» левую колонку до ширины правой, скопировав текст справа в левую колонку.Зачем?Когда центральный столбец должен быть перенесен, чтобы сохранить центр относительно всей таблицы, он должен будет переноситься так, как если бы оба других столбца имели одинаковую ширину.Вы можете увидеть это здесь: http://jsfiddle.net/brettwp/n5eSB/, отрегулировав размер панели Result.Обратите внимание, что это делает вашу таблицу на одну строку выше из-за скрытого содержимого.Я не знаю всех деталей вашей реализации, поэтому вам нужно будет внести коррективы (скрытое переполнение, отрицательные поля, относительное положение и т. Д.), Чтобы это вписалось в страницу, но вам следует начать:

<table>
    <tr>
        <td class="d1">
            left
            <div class="copy">right text</div>
        </td>
        <td class="d2">
            center text that is long enough to force a word wrap!
        </td>
        <td class="d3">right text</td>
    </tr>
</table>

table {
    width: 100%;
}
td {
    vertical-align: top;
}
.d1 {
    text-align: left;
}
.d2 {
    text-align:center;
}
.d3 {
    text-align:right;
}
.copy {
    visibility: hidden;
}
.copy, .d3 {
    white-space: nowrap;
}

Answer 3

Этого можно добиться с помощью свойств display: table (-row / -cell):

http://jsfiddle.net/WYxek/

<div class="table">
    <div class="tr">
        <div class="d1">left text</div>
        <div class="d2">center text</div>
        <div class="d3">right text</div>
    </div>
</div>



.table {
    display:table;
    width:100%;
}
.tr {
    display:table-row;
}
.d1 {
    display:table-cell;
    width:25%;
}
.d2 {
    display:table-cell;
    text-align:center;
    width:50%;
}
.d3 {
    display:table-cell;
    text-align:right;
    width:25%;
}