HTML+CSS: Wie bekomme ich Text Zentriert in einem Inline-Flex?
Folgender jsfiddle:
https://jsfiddle.net/t38zjxow/
CSS:
div {
display:flex;
}
span {
background:#0f0;
display:inline-flex;
width:10em;
margin:1em;
text-align:center;
}
HTML:
<div>
<span>test1</span>
<span>test2</span>
</div>
Wie bekomme ich die beiden Texte zentriert?
1 Antwort
justify-content: center;
anstatt
text-align:center;
Das liegt daran, dass dein <span> durch display: inline-flex ein Flex-Container ist. Somit wird der Inhalt dieses Elements, in dem Fall der Text, nurnoch durch Flexbox positioniert, und nicht mehr anhand der üblichen Regeln. Den Inhalt eines Flex-Containers zentriert man mit justify-content: center horizontal und mit align-items: center vertikal. (Ausser man ändert die Flex-Direction zu column, dann switchen die beiden, weil die Haupt-Achse dann vertikal ist. Justify-Content bezieht sich immer auf links/rechts bezüglich der Hauptachse, Align-Items bezieht sich immer auf oben/unten bezüglich der Hauptachse).
Daran bist du doch selbst schuld. xD
Hab dir noch die Erklärung ergänzt. Wenn du das display: inline-flex wegmachst, dann funktioniert's mit text-align: center
Aber du wirst wohl deine Gründe haben, den span zu einem Flex-Element zu machen, oder? xD
Nich unbedingt, hat beides seine Vor- und Nachteile. Man muss halt nur wissen, wann man was braucht.
Danke! Können die nicht mal bei nem bekannten Attribut bleiben…?! :D