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

Есть ли способ иметь левый, центральный и правый выровненный текст в одной строке с 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;
}

Ответ 1

Вам нужно будет "обмануть" левый столбец так же широко, как справа, скопировав текст справа в левый столбец. Зачем? Когда центральную колонку нужно обернуть, чтобы поддерживать центр по отношению ко всей таблице, ее нужно будет обернуть, как если бы оба других столбца были одинаковой ширины. Вы можете увидеть это здесь: 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;
}

Ответ 2

с четкими div

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>

Ответ 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%;
}