Question

在以下条件下，是否可以使用HTML / CSS在同一行上使用左对齐，居中对齐和右对齐文本？

左右两段文字很短，但我不知道它们的长度。
文本的中心部分可能足够长以包裹。
中间的文字应该在中心显示。
文本的中心部分不应与左侧或右侧文本重叠。

使用3个div的显而易见的解决方案，其中左右浮动的两个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;
}

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

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

3 个答案: