CSS：左、中、右对齐同一行上的文本

Question

提问by user1822824

I need to left, center, & right align texton the same line. I have the following text:

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

Left Align: 1/10
Center: 02:27
Right Align: 100%

左对齐：1/10
中心：02:27
右对齐：100%

I wrote the following code which works for left and right aligning text but does not work correctly for the center text.

我编写了以下代码，它适用于左右对齐文本，但不适用于中心文本。

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

Answer 1

采纳答案by JCBiggar

Try this

尝试这个

UPDATED

更新

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

Demo the code here: http://jsfiddle.net/wSd32/1/Hope this helps!

在此处演示代码：http: //jsfiddle.net/wSd32/1/希望这会有所帮助！

Answer 2

回答by Pod

The magic HTML5 way that works responsively is to use flex:

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

Demo:

演示：

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

You'll find it avoids the awkward box wrapping that occurs with floats on a small screen.

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

Answer 3

回答by Adam111p

And now a fresh, quite different approach.

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

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

Answer 4

回答by daniel

Maybe this works:

也许这有效：

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

Answer 5

回答by DRosenfeld

A variation of JCBiggar's great solution is to skip the width and text-align for .alignright, but simply to float it to the right. The advantage of this is that it removes the concern that the inner elements have set margins or paddings, making the 33.33% * 3 exceed the 100% width of the containing element. The desired placement of .alignright can be effected much more simply.

JCBiggar 出色解决方案的一个变体是跳过 .alignright 的宽度和文本对齐，而只是将其向右浮动。这样做的好处是它消除了内部元素设置边距或填充的担忧，使 33.33% * 3 超过包含元素的 100% 宽度。.alignright 的所需位置可以更简单地实现。

The CSS would then be:

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

This worked well for me when I had elements which required paddings of set amounts (and could not be represented as percentages) - as shown above in the CSS.

当我有需要设置数量的填充（并且不能表示为百分比）的元素时，这对我来说效果很好 - 如上面的 CSS 所示。

Answer 6

回答by Thameem

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

Answer 7

回答by Chris Malek

If you are also looking to top, middle, and bottom align text across the same line then one can expand on @Thameem's answer to get an even more complete positioning solution:

如果您还希望在同一行上对齐文本的顶部、中部和底部，那么可以扩展 @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>

With HTML custom elements and a bit of CSS you can optionally make it a bit more readable:

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

And the corresponding CSS:

以及相应的 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;
}

Please note the British spelling of "centre" instead of "center" in some places. I am not British but this was done to avoid conflicting with the existing HTML "center" element and its built-in styles. If you happen to know the magic combination of styles to override the "center" element I would be interested to hear.

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

You can also use this to do fewer positions:

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

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

But be careful to use the same set of "columns" (left, center, right) between "rows" (top, middle, bottom) since it is technically still a table underneath.

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

I realize I probably committed a few programming sins with this example:

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

mixing content and layout
not namespacing my custom elements (which could involve naming conflicts if the names I chose happen to be used by a library or the HTML/XML spec)
not using the more modern flex layout
etc.

混合内容和布局
不命名我的自定义元素（如果我选择的名称碰巧被库或 HTML/XML 规范使用，则可能涉及命名冲突）
不使用更现代的 flex 布局
等等。

Please forgive me.

请原谅我。

I have found it difficult to achieve similar layout using other solutions. I hope this helps other people struggling with similar requirements.

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

CSS：左、中、右对齐同一行上的文本

提问by user1822824

采纳答案by JCBiggar

回答by Pod

回答by Adam111p

回答by daniel

回答by DRosenfeld

回答by Thameem

回答by Chris Malek

相关推荐

最近更新

标签

CSS：左、中、右对齐同一行上的文本

提问by user1822824

采纳答案by JCBiggar

回答by Pod

回答by Adam111p

回答by daniel

回答by DRosenfeld

回答by Thameem

回答by Chris Malek

相关推荐

CSS 解决“填充”css问题的最佳方法

创建 CSS 以放大复选框

CSS 是否可以将 div 底部中心与宽度对齐？

CSS 在页面中央显示图像

相关推荐

最近更新

标签