CSS：左，中，右对齐在同一行上的文本 [英] CSS: Left, Center, & Right Align Text on Same Line

问题描述

我需要离开，居中，右对齐文本在同一行。我有以下文字：

• 左对齐：1/10


• 中心：02:27


• 右对齐：100％

我写了以下代码，

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

解决方案

更新

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/
希望这有帮助！

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

• Left Align: 1/10
• Center: 02:27
• Right Align: 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;
}

解决方案

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!

这篇关于CSS：左，中，右对齐在同一行上的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！