同一行上的左对齐,居中对齐和右对齐文本

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

有明确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>

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;
}