web-dev-qa-db-fra.com

CSS: Aligner le texte sur la même ligne à gauche, au centre et à droite

J'ai besoin d'aligner à gauche, au centre et à droite le texte sur la même ligne. J'ai le texte suivant:

  • Alignement à gauche: 1/10
  • Centre: 02:27
  • Alignement à droite: 100%

J'ai écrit le code suivant qui fonctionne pour aligner le texte à gauche et à droite mais ne fonctionne pas correctement pour le texte du centre.

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;
}
csscss3
31
user1822824

Essaye ça

MIS &AGRAVE; JOUR

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

Démo le code ici: http://jsfiddle.net/wSd32/1/ J'espère que cela aide! 

35
JCBiggar

La manière magique qui fonctionne en HTML5 est d’utiliser 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;
}

Démo:

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

Vous constaterez que cela évite l'encapsulation délicate des boîtes de dialogue sur un petit écran.

4
Pod

Peut-être que cela fonctionne:

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

Et maintenant, une approche nouvelle et assez différente.

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

3
Adam111p

Une variante de l'excellente solution de JCBiggar consiste à ignorer la largeur et à aligner le texte pour .alignright, mais simplement à le faire flotter à droite. L'avantage de ceci est que cela supprime le souci que les éléments internes aient des marges ou des marges intérieures définies, faisant que 33.33% * 3 dépasse la largeur à 100% de l'élément conteneur. Le placement souhaité de .alignright peut être effectué beaucoup plus simplement.

Le CSS serait alors:

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

Cela a bien fonctionné pour moi lorsque j'avais des éléments qui nécessitaient des marges de remplissage (et ne pouvaient pas être représentés sous forme de pourcentages) - comme indiqué ci-dessus dans le CSS.

2
DRosenfeld

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

0
Thameem