我需要离开，居中，和右对齐文字在同一行。我有以下文字：
我编写了以下代码，该代码适用于左右对齐文本，但对中心文本无法正常工作。
HTML
<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>
CSS
.alignleft {
float: left;
}
.aligncenter {
float: left;
}
.alignright {
float: right;
}
答案 0 :(得分：35)
试试这个
<强>已更新
<强> HTML
<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>
<强> CSS
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}
在此处演示代码：http://jsfiddle.net/wSd32/1/ 希望这可以帮助！
答案 1 :(得分：5)
现在是一种全新的，完全不同的方法。
.same-line {
height: 10px; /*childrens it's all absolute position, so must set height*/
position: relative;
}
.same-line div{
display: inline-block;
position: absolute;
}
.on-the-left{
left:0px;
}
.on-the-center{
left: 0%;
right: 0%;
text-align: center;
}
.on-the-right{
right: 0px;
}<div class="same-line">
<div class="on-the-left" >it's Left</div>
<div class="on-the-center" >this Centrer bla bla bla</div>
<div class="on-the-right" >it's Right</div>
</div>
答案 2 :(得分：4)
响应性的神奇HTML5方式是使用flex：
<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>
CSS
#textbox {
display: flex;
justify-content: space-between;
}
演示：
http://jsfiddle.net/sep4kf6a/1/
你会发现它可以避免在小屏幕上浮动时出现的笨拙的包装。
答案 3 :(得分：3)
也许这有效：
p{width:33%;float:left;}
.alignleft{text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}
答案 4 :(得分：3)
对Pod答案的改进：
#textbox {
display: flex;
}
.alignleft {
flex: 1;
text-align: left;
}
.aligncenter {
flex: 1;
text-align: center;
}
.alignright {
flex: 1;
text-align: right;
}<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
这避免了在小屏幕上出现浮点时出现的尴尬框换行以及将中间文本居中在#textbox中间的情况。
JSFiddle：
答案 5 :(得分：2)
JCBiggar的一个很好的解决方案是跳过.alignright的宽度和文本对齐，但只是将它浮动到右边。这样做的好处是它消除了内部元素设置边距或填充的担忧，使得33.33％* 3超过了包含元素的100％宽度。 .alignright的所需位置可以更简单地实现。
CSS将是：
.alignleft {
float: left;
width:33.33333%;
text-align:left;
padding-left: 10px;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: right;
padding-right: 10px;
}
当我的元素需要设定量的填充（并且不能表示为百分比）时，这对我来说效果很好 - 如上面CSS中所示。
答案 6 :(得分：0)
<table style="width:100%;">
<tr>
<td style="text-align:left;"><p>left</p></td>
<td style="text-align:center;"><p>center</p></td>
<td style="text-align:right;"><p>right</p></td>
</tr>
</table>
答案 7 :(得分：0)
如果您还希望在同一行上使文本的顶部，中间和底部对齐，则可以扩展@Thameem的答案以获得更完整的定位解决方案：
<table style="width:100%; height: 100%;">
<tr>
<td style="text-align:left; vertical-align: top;">top left</td>
<td style="text-align:center; vertical-align: top;">top center</td>
<td style="text-align:right; vertical-align: top;">top right</td>
</tr>
<tr>
<td style="text-align:left; vertical-align: middle;">middle left</td>
<td style="text-align:center; vertical-align: middle;">middle center</td>
<td style="text-align:right; vertical-align: middle;">middle right</td>
</tr>
<tr>
<td style="text-align:left; vertical-align: bottom;">bottom left</td>
<td style="text-align:center; vertical-align: bottom;">bottom center</td>
<td style="text-align:right; vertical-align: bottom;">bottom right</td>
</tr>
</table>
使用HTML自定义元素和一些CSS，您可以选择使其更具可读性：
<position>
<top>
<left>top left</left><centre>top centre</centre><right>top right</right>
</top>
<middle>
<left>middle left</left><centre>middle centre</centre><right>middle right</right>
</middle>
<bottom>
<left>bottom left</left><centre>bottom centre</centre><right>bottom right</right>
</bottom>
</position>
以及相应的CSS：
position {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
top {
display: table-row;
}
top * {
vertical-align: top;
}
middle {
display: table-row;
}
middle * {
vertical-align: middle;
}
bottom {
display: table-row;
}
bottom * {
vertical-align: bottom;
}
left {
display: table-cell;
text-align: left;
}
centre {
display: table-cell;
text-align: center;
}
right {
display: table-cell;
text-align: right;
}
在某些地方，请注意英式拼写是“ centre”而不是“ center”。我不是英国人，但这样做是为了避免与现有的HTML“ center”元素及其内置样式冲突。如果您碰巧知道样式的神奇组合可以覆盖“中心”元素，那么我将很感兴趣。
您还可以使用它来减少位置：
<position>
<middle>
<centre>centre</centre>
</middle>
</position>
但是要小心在“行”（上，中，下）之间使用同一组“列”（左，中，右），因为从技术上讲，它仍然是表格。
我意识到我可能在此示例中犯了一些编程错误：
请原谅我。
我发现使用其他解决方案很难实现类似的布局。我希望这可以帮助其他苦苦应对类似要求的人。
答案 8 :(得分：0)
如果有人正在寻找内联 CSS。代码如下。这帮助我修复了移动设备。
-i答案 9 :(得分：0)
这是我的简单代码
<div style="display: flex;">
<span style="margin-right: auto">left</span>
<span>center</span>
<span style="margin-left: auto">right</span>
</div>