Texte aligné à gauche, au centre et à droite sur la même ligne
Est-il un moyen d'avoir de gauche, de centre, et un texte aligné à droite sur la même ligne avec le HTML/CSS, dans les conditions suivantes?
- Gauche et à droite des morceaux de texte sera court, mais je ne sais pas leur longueur à l'avance.
- Le centre bout de texte qui peut être assez longue à enrouler.
- Le centre bout de texte qui doit apparaître EXACTEMENT dans le centre.
- La pièce centrale de texte ne doit pas se superposer la gauche ou la droite des morceaux de texte.
La solution la plus évidente de l'aide de 3 divs avec les deux flottant à gauche et à droite fonctionne très bien, sauf que le centre bout de texte n'est pas centré exactement (par exemple, si la gauche morceau de texte est plus long que le droit, le centre apparaît centré juste à droite du centre absolu).
J'ai seulement besoin d'une solution qui fonctionne sur WebKit. Des idées?
Modifier - c'est Ce que j'ai jusqu'à présent...
HTML:
<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>
CSS:
#left {
float: left;
text-align: left;
padding-right: 10px;
}
#center {
text-align: center;
}
#right {
float: right;
text-align: right;
padding-left: 10px;
}
source d'informationauteur Hilton Campbell | 2011-12-15
Vous devez vous connecter pour publier un commentaire.
Vous aurez besoin de "truc" de la colonne de gauche en étant aussi large que le droit, en copiant le texte à partir de la droite, dans la colonne de gauche. Pourquoi? Lorsque le centre de la colonne doit envelopper afin de maintenir le centre à l'égard de l'ensemble de la table, il aura besoin d'envelopper comme si les deux autres colonnes sont de la même largeur. Vous pouvez voir ça ici: http://jsfiddle.net/brettwp/n5eSB/ en ajustant la taille de la
Result
panneau. Notez que cela ne signifie faire de votre table une ligne de plus grand en raison du contenu caché. Je ne connais pas tous les détails de votre mise en œuvre, de sorte que vous aurez besoin de faire des ajustements (débordement de caché, de marges négatives, la position relative, etc) pour obtenir ceci à s'insérer dans la page, mais il devrait vous obtenir a commencé:solution claire divs
https://jsfiddle.net/LaL92q88/1/
Vous pouvez réaliser cela avec le display:table(-ligne/cellule) propriétés:
http://jsfiddle.net/WYxek/