Est-il possible d’aligner verticalement le texte dans une balise div ?

Question

Le code ci-dessous (également disponible comme une démo sur JS Fiddle) ne pas positionner le texte au milieu, comme je voudrais idéalement qu’il. Je ne peux pas trouver quelque sorte de centrer verticalement texte dans une balise div, même en utilisant la `` attribut. Comment est-ce que je peux faire cela ?

Answer 1

Andres Ilich a droit. Juste au cas où quelqu'un s'ennuie de son commentaire...

A.) Si vous avez seulement une ligne de texte:

HTML:

<div>vertically centered text</div>

CSS:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
  vertical-align: middle;
}

Démo: http://jsfiddle.net/t7zYx/

B.) Si vous avez plusieurs lignes de texte:

HTML:

<div><span>vertically centered text</span></div>

CSS:

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

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

Démo: http://jsfiddle.net/V5uKe/

Answer 2

Créer un conteneur pour le contenu de votre texte, un `` peut-être, effectuez les opérations suivantes :

Edit : démo

Answer 3

Un bon gars nommé Mahendra publié un travail très solution ici

La classe suivante devrait rendre l’élément horizontalement et verticalement centrée à son parent.

Answer 4

Il s’agit d’un ancien sujet, mais la réponse acceptée ne fonctionne pas pour texte multiligne et c’est le meilleur résultat dans google. J’ai mis à jour le jsfiddle pour montrer les css multiligne texte vertical s’aligner comme expliqué ici

Il travaille également avec `` en « encore un autre... »

Answer 5

Essayez ceci :

HTML

CSS