696 votes

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

<p>Le code ci-dessous (également disponible comme <a href="http://jsfiddle.net/9Y7Cm/3/">une démo sur JS Fiddle</a>) 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 <code></code> attribut. Comment est-ce que je peux faire cela ?<pre><code></code></pre><pre><code></code></pre></p>

682voto

Jenny O'Reilly Points 2150

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/

455voto

Andres Ilich Points 41712
<p>Créer un conteneur pour le contenu de votre texte, un <code></code> peut-être, effectuez les opérations suivantes :<pre><code></code></pre><p>Edit : <a href="http://jsfiddle.net/9Y7Cm/5/">démo</a></p></p>

244voto

Omar Tariq Points 1206
<p>Un bon gars nommé Mahendra publié un travail très solution <a href="http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working">ici</a><p>La classe suivante devrait rendre l’élément horizontalement et verticalement centrée à son parent.</p><pre><code></code></pre></p>

63voto

Eduard Gamonal Points 3033
<p>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 <a href="http://jsfiddle.net/9Y7Cm/2321/">pour montrer les css multiligne texte vertical s’aligner</a> comme expliqué <a href="http://css-tricks.com/vertically-center-multi-lined-text/">ici</a><pre><code></code></pre><p>Il travaille également avec <code></code> en « encore un autre... »</p></p>

26voto

Petr Voborník Points 51
<p>Essayez ceci :<p>HTML</p><pre><code></code></pre><p>CSS</p><pre><code></code></pre></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X