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

Is there a way to have left-, center-, and right-aligned text on the same line with HTML/CSS, under the following conditions?

在以下条件下,有没有办法在与HTML / CSS相同的行上使用左对齐,居中对齐和右对齐的文本?

1. The left and right pieces of text will be short, but I do not know their length in advance.

左侧和右侧文本将很短,但我不知道它们的长度。

2. The center piece of text may be long enough to wrap.

中心文本可能足够长以包裹。

3. The center piece of text should appear EXACTLY in the center.

中间一段文字应该在中心显示。

4. The center piece of text should not overlap the left or right pieces of text.

中心文本不应与左侧或右侧文本重叠。

The obvious solution of using 3 divs with the two of them floating left and right works pretty well, except that the center piece of text is not centered exactly (for example, if the left piece of text is longer than the right, the center appears centered just right of the absolute center).

使用3个div并且左右浮动的两个div的明显解决方案工作得很好,除了中心文本没有准确居中(例如,如果左边的文本比右边长,则中心出现中心位于绝对中心右侧)。

I only need a solution that works on WebKit. Any ideas?

我只需要一个适用于WebKit的解决方案。有任何想法吗?

Edit - This is what I have so far...

编辑 - 这是我到目前为止...

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

3 个解决方案

#1

You will need to "trick" the left column into being as wide as the right, by copying the text from the right into the left column. Why? When the center column needs to wrap in order to maintain center with respect to the whole table it will need to wrap as if both other columns are the same width. You can see this here: http://jsfiddle.net/brettwp/n5eSB/ by adjusting the size of the Result panel. Note that this does make your table one line taller due to the hidden content. I don't know all the details of your implementation, so you will need to make adjustments (overflow hidden, negative margins, position relative, etc) to get this to fit into the page, but it should get you started:

您需要通过将文本从右侧复制到左侧列来“欺骗”左侧列,使其与右侧一样宽。为什么?当中心列需要换行以便相对于整个表保持中心时,它将需要换行,好像其他列的宽度相同。你可以在这里看到这个: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

solution with clear divs

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

You can achieve this with the display:table(-row/-cell) properties:

您可以使用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%;
}