CSS: Gauche, Centre et droite alignent le texte sur la même ligne
J'ai besoin d'aligner à gauche, au centre et à droite text sur la même ligne. J'ai le texte suivant:
- Aligné À Gauche: 1/10
- Centre: 02:27
- Aligner À Droite: 100%
J'ai écrit le code suivant qui fonctionne pour le texte d'alignement gauche et droit mais ne fonctionne pas correctement pour le texte central.
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;
}
5 réponses
Essayez ceci
Mise à 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/ Espérons que cette aide!
La manière magique HTML5 qui fonctionne de manière réactive 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 trouverez qu'il évite l'emballage de boîte maladroite qui se produit avec des flotteurs sur un petit écran.
Peut-être que cela fonctionne:
p{width:33%;float:left;}
.alignleft{text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}
Une variante de L'excellente solution de JCBiggar consiste à ignorer la largeur et l'alignement du texte.alignright, mais simplement flotter vers la droite. L'avantage de ceci est qu'il supprime la préoccupation que les éléments internes ont défini des marges ou des rembourrages, ce qui fait que le 33.33% * 3 dépasse la largeur de 100% de l'élément contenant. L'emplacement souhaité .alignright peut être effectuée 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 quand j'avais des éléments qui nécessitaient rembourrages de montants fixes ( et ne pouvaient pas être représentés en pourcentages) - comme indiqué ci-dessus dans le CSS.
Et maintenant une nouvelle approche, tout à fait 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>