CSS：同一行上的左對齊，居中和右對齊文本

我需要左對齊，中心對齊&右對齊文本位於同一行上。我有以下文字：CSS：同一行上的左對齊，居中和右對齊文本

左對齊：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; 
}

來源

2012-12-04 user1822824

的可能的複製[如何排列3周的div（左/中/右），另一個DIV中？（http://stackoverflow.com/questions/2603700/how-to- align-3-divs-left-center-right-inside-another-div） – aij

這個問題涉及對齊文本;而不是對齊空白的div。 – user1822824

試試這個

修訂

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/ 希望這有助於！

來源

2012-12-04 00:19:06 JCBiggar

當字體不一致時，這不起作用 - 基線全部搞砸了。 –

謝謝！ https://github.com/hery/hery.github.com/commit/5ff552f1034a84c8a3a634ed53c636ebbb0b8821 – ratsimihah

也許這個作品：

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

來源

2012-12-04 00:15:31 daniel

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-26 14:54:51 DRosenfeld

神奇的HTML5方式響應工作是使用柔性：

<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-29 17:07:38 Pod

這個中心在'1/10'的右側和'100％'的左側之間'02：27'。它不會將它居中放在包含＃的文本框中。 – expz

現在是一種全新的，完全不同的方法。

.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-13 20:35:55 Adam111p

CSS：同一行上的左對齊，居中和右對齊文本

回答

相關問題