Existe-t-il un moyen facile de centrer le texte verticalement dans un div?

Question

J'ai un texte dans un <div> que je veux centré verticalement. Un moyen facile de le faire (méthode de positionnement non-absolue).

Answer 1

ceci est une autre méthode:

http://jsfiddle.net/SebastianPataneMasuelli/V2D3L/1/

l'astuce consiste à faire de la hauteur du div la même valeur que line-height.

<div>some text</div> 

div { 
line-height: 100px; 
height: 100px; 
} 

Ceci vous donne une ligne de texte centré verticalement.

il y a un moyen: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.

désolé, qui utilise le positionnement absolu.

(mais il fonctionne)

Answer 2

Non, malheureusement, il n'y a pas de bon moyen de le faire en utilisant CSS. Je suggère d'utiliser un framework javascript comme JQuery ou quelque chose comme ça pour y parvenir. Est-ce juste du texte que vous essayez de centrer verticalement?

En outre, je sais que beaucoup de gens hésitent à utiliser les tables, mais les tables html vous permettront de centrer verticalement votre texte, ce qui peut être un problème si vous ne voulez pas utiliser javascript.

Donc, je suppose que le soit utiliser un peu de javascript et éviter d'utiliser des tables html ou simplement utiliser des tableaux pour faire votre centrage vertical pour vous. Pour votre référence, vous utilisez l'attribut valign sur un élément td d'une table pour aligner verticalement son contenu.

Vous pouvez faire quelque chose comme ceci:

<div id="center-text"> 

    <div id="center-text-inner"> 
    hello there 
    </div> 

</div> 

$(document).ready(function() { 

    $('#center-text-inner').css({ 
    'position' : 'relative', 
    'top' : ($('#center-text').height() - $(this).height())/2 
    }); 

}); 

Answer 3

Oui, il est possible - une enquête très approfondie peut être trouvée ici:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 4

il suffit d'ajouter le code CSS suivant à div

display:table-cell; 
vertical-align:middle; 

vous pouvez également voir l'exemple http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/