Html 同一行上的左对齐、居中和右对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8523028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left-, center-, and right-aligned text on the same line
提问by Hilton Campbell
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 的同一行上使用左对齐、居中和右对齐的文本？
- The left and right pieces of text will be short, but I do not know their length in advance.
- The center piece of text may be long enough to wrap.
- The center piece of text should appear EXACTLY in the center.
- 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:
HTML：
<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>
CSS:
CSS：
#left {
float: left;
text-align: left;
padding-right: 10px;
}
#center {
text-align: center;
}
#right {
float: right;
text-align: right;
padding-left: 10px;
}
采纳答案by Brett Pontarelli
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 Resultpanel. 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;
}
回答by razon
solution with clear divs
带有清晰 div 的解决方案
https://jsfiddle.net/LaL92q88/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>
回答by ptriek
You can achieve this with the display:table(-row/-cell) properties:
您可以使用 display:table(-row/-cell) 属性实现此目的：
<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%;
}
