47

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

  • 左对齐：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;
}
4

11 回答 11

49

试试这个

更新

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/

于 2012-12-04T00:19:06.967 回答
20

响应式工作的神奇 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/

你会发现它避免了在小屏幕上浮动时出现的尴尬的盒子包装。

于 2016-03-29T17:07:38.323 回答
12

现在是一种全新的、完全不同的方法。

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

于 2017-11-13T20:35:55.420 回答
3

也许这有效：

p{width:33%;float:left;}
.alignleft{text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}
于 2012-12-04T00:15:31.483 回答
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 中间居中的中间文本。

JSF中：

http://jsfiddle.net/secnayup/

于 2020-06-05T18:42:58.730 回答
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 所示。

于 2014-08-26T14:54:51.500 回答
2 

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

于 2019-02-08T06:18:12.393 回答
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;
}

请注意在某些地方使用“中心”而不是“中心”的英式拼写。我不是英国人，但这样做是为了避免与现有的 HTML“中心”元素及其内置样式发生冲突。如果您碰巧知道样式的神奇组合来覆盖“中心”元素，我很想听听。

你也可以用它来做更少的职位：

<position>
    <middle>
        <centre>centre</centre>
    </middle>
</position>

但要小心在“行”（顶部、中间、底部）之间使用相同的“列”（左、中、右）集，因为从技术上讲，它仍然是下面的表格。

我意识到我可能在这个例子中犯了一些编程罪：

  1. 混合内容和布局
  2. 不命名我的自定义元素（如果我选择的名称恰好被库或 HTML/XML 规范使用，这可能涉及命名冲突）
  3. 不使用更现代的 flex 布局
  4. 等等

请原谅我。

我发现使用其他解决方案很难实现类似的布局。我希望这可以帮助其他有类似要求的人。

于 2020-05-25T21:52:29.213 回答
0

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

<div style="display: flex; justify-content: flex-start; flex-flow:row wrap; height: 0px;">
于 2021-05-03T17:39:02.963 回答
0

这是我的简单代码

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

于 2021-05-24T00:57:15.123 回答
0

我在这里的其他答案有很多对齐问题，所以我想出了另一种方法。这个 HTML：

<div class="aligned">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

使用这个 CSS：

.aligned { position: relative; text-align: center; }
.aligned .left { left: 0; }    /* or >0 for left padding */
.aligned .right { right: 0; }  /* or >0 for right padding */
.aligned .left, .aligned .right {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

在同一行上提供左/中/右文本，具有以下功能：

  • 可以删除左和/或右 div（因此您可以将其用于 left+center 或 center+right）。
  • 中心正确居中；在父级中，而不是在左/右文本的边缘之间。即左/右内容不会影响中心位置。
  • 不会创建任何特定大小的“列”，因此您不必处理令人惊讶的自动换行和其他东西。不使用任何特定的硬编码大小。
  • HTML 结构非常简单。此外，div 的顺序并不重要。
  • 无论字体系列和大小如何，所有文本都垂直居中。您可以调整translatey 值以将顶部或底部基线与中心线对齐。
  • 父容器保持流动。
  • 反应灵敏。
  • 如果您有哲学头脑：不要使用任何奇怪的 CSS 组件，例如为非表格元素设置表格显示模式等。CSS 和 HTML 非常清晰和直接。

但是，它有以下怪癖：

  • 父div高度由中心高度决定；因此，如果左/右字体大小要大得多，或者如果您完全省略了中心 div，则必须手动将父 div 高度设置为合理的值。
  • 不遵守左/右父填充；虽然很容易修复：只需将显式left和right位置设置为所需的填充。

下面的例子。希望有帮助。

/* script isn't needed for layout; it's just for controlling the examples. */
$('.left').text('Left');
$('.center').text('Center');
$('.right').text('Right');

let step = 0;
setInterval(function() {
  step ++;
  let L = "x".repeat(5 - Math.abs((step % 10) - 5));
  let M = "x".repeat(6 - Math.abs((step % 12) - 6));
  let R = "x".repeat(7 - Math.abs((step % 14) - 7));
  $('.left').text(`${L}Left${L}`);
  $('.center').text(`${M}Center${M}`);
  $('.right').text(`${R}Right${R}`);
}, 100);

let fstep = 0;
setInterval(function() {
  fstep ++;
  let L = 50 + (fstep % 3) * 50;
  let R = 150 - (fstep % 3) * 50;
  $('.left').css('font-size', `${L}%`);
  $('.right').css('font-size', `${R}%`);
}, 500);
.aligned { position: relative; text-align: center; }
.aligned .left { left: 0; }
.aligned .right { right: 0; }
.aligned .left, .aligned .right {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

/* rest of this is formatting examples; not needed for alignment. */
.aligned {
  border: 1px solid #888;
  padding: 1em;
  margin: 1em;
}
.left {
  font-family: sans-serif;
}
.center {
  font-family: serif;
}
.right {
  font-family: monospace;
}
<!-- typical -->
<div class="aligned">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

<!-- order doesn't matter -->
<div class="aligned">
  <div class="right"></div>
  <div class="left"></div>
  <div class="center"></div>
</div>
<div class="aligned">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="aligned">
  <div class="right"></div>
  <div class="center"></div>
  <div class="left"></div>
</div>

<!-- left/right omitted -->
<div class="aligned">
  <div class="center"></div>
  <div class="right"></div>
</div>
<div class="aligned">
  <div class="left"></div>
  <div class="center"></div>
</div>
<div class="aligned">
  <div class="center"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2021-12-07T19:34:36.090 回答