CSS: 左对齐、居中和右对齐文本在同一行上

Question

我需要在同一行上左对齐、居中和右对齐文本。 我有以下文本：

• 左对齐：1/10
• 居中：02:27
• 右对齐：100％

我编写了以下代码，可以左对齐和右对齐文本，但无法正确处理居中文本。

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

- user1822824

---

可能是重复的问题，参考如何在另一个div中对齐3个div（左/中/右）？ - aij

这个问题涉及到文本对齐，而不是空的div对齐。 - user1822824

Answer 1

试一试

已更新

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/ 希望这能帮到你！

=======更新于2021年:

现在你可以使用HTML5 Flex来实现相同的效果。无需浮动或清除div。只需将Display: flex;添加到包含要定位的项目的父容器中即可。

HTML

<div id="textbox">
  <p class="alignleft">1/10</p>
  <p class="aligncenter">02:27</p>
  <p class="alignright">100%</p>
</div>

CSS

#textbox {display:flex; flex-flow:row wrap;}

.alignleft {
  width: 33.33333%;
  text-align: left;
}
.aligncenter {
  width: 33.33333%;
  text-align: center;
}
.alignright {
  width: 33.33333%;
  text-align: right;
}

使用Flex演示结果: http://jsfiddle.net/jcbiggar1/tsopnf4d/4/

更多关于Flex的内容: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- JCBiggar

---

当字体不完全相同时，这种方法就行不通了——基线会出现问题。 - Eamon Nerbonne

谢谢！https://github.com/hery/hery.github.com/commit/5ff552f1034a84c8a3a634ed53c636ebbb0b8821 - ratsimihah

Answer 2

使用 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>

#textbox {
    display: flex;
    justify-content: space-between;
}

演示:

http://jsfiddle.net/sep4kf6a/1/

它可以避免在小屏幕上使用浮动时出现的尴尬盒子换行问题。

- Pod

---

这将把2:27置于1/10的右侧和100%的左侧中心位置。它并不会将其置于包含的#textbox中心位置。 - expz

Answer 3

现在，我们来介绍一种新鲜而独特的方法。

.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>

- Adam111p

---

这是在 Laravel 应用程序中生成 PDF 的正确选项（使用 dompdf 转换器）；“浮动方法”无法正常工作。 - Fer García

这帮助我解决了一个类似的问题。喜欢这种方法。 - Donald Matheson

Answer 4

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：

http://jsfiddle.net/secnayup/

- Kaelan Dawnstar

Answer 5

也许这个可以解决问题：

p{width:33%;float:left;}
.alignleft{text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}

- daniel

Answer 6

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

- Thameem

Answer 7

一种变体的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;
}​

当我需要设置固定的padding值（无法用百分比表示）时，这种方法对我很有效——如上所示的CSS。

- DRosenfeld

Answer 8

如何实际操作：

<div style="position: relative;">
    <p style="position: absolute; left: 0;">Left</p>
    <p style="position: absolute; width: 100%; text-align: center;">Center</p>
    <p style="position: absolute; right: 0;">Right</p>
</div>

- racitup

---

这就是我需要的，简单而优雅。 - wa007

Answer 9

如果有人正在寻找内联CSS。 代码如下。 这帮助我在移动设备上修复了它。

<div style="display: flex; justify-content: flex-start; flex-flow:row wrap; height: 0px;">

- Exceptional

Answer 10

这是我的简单代码

<div style="display: flex;">
  <span style="margin-right: auto">left</span>
  <span>center</span>
  <span style="margin-left: auto">right</span>
</div>

- Edsel Ayala