Centrer verticalement le texte vertical

J'ai quelques textes verticaux et je ne peux pas centrer alors verticalement dans leurs divs. Voici un exemple: http://jsfiddle.net/hThGb/2657/Centrer verticalement le texte vertical

Voir les 3 divs (2 orange et 1 rouge). Les textes à l'intérieur des divs ne sont pas centrés verticalement, ce qui fait que les textes fuient à l'extérieur des divs.

J'ai essayé avec vertical-align: middle mais cela ne fera rien.

Comment puis-je centrer verticalement un texte vertical à l'intérieur d'une div?

Source

2013-10-08 alexandernst

Si votre texte à l'intérieur du boxes peut être sur une seule ligne, vous pouvez utiliser la propriété line-height pour les aligner verticalement.

utiliser le line-height:(height of the container)

JS Fiddle Demo

Source

2013-10-08 09:43:33 Sachin

Ce genre de travaux, mais quand je clique sur les textes (pour élargir les divs) les textes se déplacent en dehors des divs. EDIT: Oubliez ce que j'ai dit, cela fonctionne très bien avec '' 'float: right;' '' :) – alexandernst

@alexandernst qui était un problème flottant. Voici une mise à jour http://jsfiddle.net/hThGb/2662/ – Sachin

Encore une sorte de buggy. Le texte de la boîte en haut à gauche est "péché leer" (avec un espace). Si je supprime l'espace, tout s'affiche correctement, mais si j'ajoute l'espace, tout se casse. – alexandernst

-1

vous pouvez utiliser padding pour que trois DIV

Source

2013-10-08 10:00:55

Il y a un moyen de faire des textes (textes multilignes) Centrer verticalement dans un récipient en hauteur inconnue.

L'astuce consiste à utiliser un pseudo-contenu avec 100% de hauteur de conteneur, définir display:inline-block. Et votre élément enfant doit également être display:inline-block;

HTML

<div> 
    <p>texts online line</p> 
</div> 
<div> 
    <p>texts will be shown in two lines, lorem ipsum doilor sit amet conse </p> 
</div> 

<div class="last"> 
    <p>texts will be shown in three lines, lorem ipsum doilor sit amet conse lorem ipsum dolor sit </p> 
</div>

CSS

div { 
    background:#bababa; 
    padding:10px; 
    width:260px; 
    height:100px; 
    margin:0 0 10px; 
} 

.last { 
    height:200px; 
} 

div > p { 
    margin:0; 
    display:inline-block; 
    vertical-align:middle; 
    width:100%; 
} 

div:before { 
    content:""; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
    width:0px; 
    font:0/0 a; 
    margin-left:-4px; 
}

Fiddle Demo

comment fonctionne

Tous les éléments display:inline-block dans la même fratrie vont réagir à vertical-align propriété de CSS; Pseudo élément prendra 100% de la hauteur du conteneur et l'autre élément réagira à cela! Donc, vous pouvez centrer verticalement au milieu ou en bas ou en haut même.

Source

2013-10-08 10:34:08

Vous avez manqué ma question. Je demande des textes * verticaux * alignés verticalement. – alexandernst

Gotcha, lemme retravailler dessus. –

Comme appliqué pour #chathere il est maintenant facile de le faire avec flexbox.

Source

2017-07-10 11:00:20 Gerard

Centrer verticalement le texte vertical

Répondre

Questions connexes