CSS: левый, центральный и правый выравнивать текст на одной линии

Мне нужно левое, центральное и правое выравнивание текста в той же строке. У меня есть следующий текст:

Выравнивание влево: 1/10
Центр: 02:27
Right Align: 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;
}

Ответы

Ответ 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/ Надеюсь это поможет!

Ответ 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>

CSS

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

Демо:

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

Вы обнаружите, что это позволяет избежать неудобной упаковки коробки, которая происходит с поплавками на маленьком экране.

Ответ 3

Возможно, это работает:

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

Ответ 4

Вариант большого решения JCBiggar - пропустить ширину и выравнивание текста для .alignright, но просто поплавать вправо. Преимущество этого заключается в том, что он устраняет беспокойство, что внутренние элементы задают поля или прокладки, делая 33.33% * 3 превышать 100% ширину содержащего элемента. Желаемое размещение .ignignright может быть сделано намного проще.

Затем 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;
}

Это работало хорошо для меня, когда у меня были элементы, которые требовали paddings из установленных сумм (и не могли быть представлены в процентах) - как показано выше в CSS.

Ответ 5

И теперь новый, совершенно другой подход.

.same-line {
    height: 10px; /*childrens it 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 Left</div>
    <div class="on-the-center" >this Centrer bla bla bla</div>
    <div class="on-the-right" >it Right</div>
  </div>