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

Question

有没有一种方法可以在HTML/CSS中实现左对齐、居中对齐和右对齐的文本同时出现在同一行上，并且满足以下条件？

1. 左侧和右侧的文本长度可能是不确定的，但都比较短。 2. 中间的文本长度可能比较长需要换行。 3. 中间的文本应该恰好居中。 4. 中间的文本不应该与左侧或右侧的文本重叠。

使用三个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;
}

- Hilton Campbell

---

嗯，我只知道一种JS解决方案，其中您可以获取左侧或右侧的宽度并将其用于另一侧... 只有这样，居中的文本才能完全居中。如果没有宽度，您将无法做到这一点，只能使用HTML和CSS... 您可以使用％宽度，例如10％-80％-10％，但这些是根据容器固定的宽度。 - ggzone

你能发布一下你正在工作的代码吗？ - ptriek

听起来需要用表格来处理。你要放哪些数据呢？ - Madara's Ghost

这是一个页面的页眉，左边有页面编号，中间是标题，右侧是链接。可能可以使用JS解决方案。 - Hilton Campbell

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>

- razon

---

<div style="margin: 0 auto; width: 100px; text-align: center">居中文本</div> - guido

@guido - 为了澄清你的建议：如果要使中央文本的所有行都居中（左右边缘不对齐），则需要使用text-align: center; 如果目标是让换行的行与第一行左对齐（一个中央的“框”，在该框内左右两侧有相等的空间，但框内文本左对齐，就像典型的段落一样），可能不需要这个属性。[在这种情况下，“auto”边距和指定宽度的组合足以使文本框居中。] - ToolmakerSteve

我曾经使用这种方法来处理带有下一页和上一页链接的分页数据。但是我的问题是，如果左侧或右侧的文本为空，则居中的文本会移动。是否有一个简单的解决方案？ - JeffryHouser

Answer 2

您需要“欺骗”左列成为与右列同宽，将右列的文本复制到左列中即可。为什么这样做？当中间列需要换行以保持相对于整个表格的居中时，它将需要像两个其他列一样宽才能换行。您可以在这里查看：通过调整Result面板的大小http://jsfiddle.net/brettwp/n5eSB/。请注意，由于隐藏内容，这确实会使您的表格多出一行。我不知道您的具体实现细节，因此您需要进行一些调整（溢出隐藏、负边距、相对位置等）以使其适合页面，但这应该能帮助您入门。

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

- Brett Pontarelli

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

- ptriek

---

好的解决方案，但它防止中心文本使用超过全宽的50％，即使左右两侧都短于25％。 - Hilton Campbell