web-dev-qa-db-fra.com

Aligner verticalement le texte dans une div

Le code ci-dessous (également disponible en tant que ne démo sur JS Fiddle ) ne positionne pas le texte au milieu, comme je l’aimerais idéalement. Je ne trouve aucun moyen de centrer le texte verticalement dans un div, même en utilisant l'attribut margin-top. Comment puis-je faire ceci?

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}
cssvertical-alignment
633
Cyclone

Créez un conteneur pour votre contenu textuel, un span peut-être.

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}
<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

JSFiddle

427
Andres Ilich

Andres Ilich a raison. Juste au cas où quelqu'un manquerait son commentaire ...

A.) Si vous n'avez qu'une ligne de texte:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}
<div>vertically centered text</div>

B.) Si vous avez plusieurs lignes de texte:

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

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}
<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>
656
Jenny O'Reilly

Mis à jour le 10 avril 2016

Les Flexbox doivent maintenant être utilisées pour aligner des éléments verticalement (voire horizontalement).

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

Un bon guide pour flexbox peut être lu sur astuces CSS . Merci Ben (des commentaires) pour l'avoir signalé. Je n'ai pas eu le temps de mettre à jour.

Un bon gars nommé Mahendra a posté une solution très efficace ici .

La classe suivante doit rendre l'élément horizontalement et verticalement centré sur son parent.

.absolute-center {

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
216
Omar Tariq

La réponse acceptée ne fonctionne pas pour un texte multiligne.

J'ai mis à jour le JSfiddle pour montrer l'alignement vertical de texte multiligne CSS comme expliqué ici :

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

Cela fonctionne aussi avec <br /> dans "encore un ..."

62
Eduard Gamonal

Essaye ça:

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}
25
Petr Voborník

Pour rendre la solution d'Omar (ou de Mahendra) encore plus universelle, le bloc de code relatif à Firefox doit être remplacé par le texte suivant:

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

Le problème avec le code d'Omar, qui est par ailleurs opérationnel, se pose lorsque vous souhaitez centrer la boîte sur l'écran ou sur son ancêtre immédiat. Ce centrage se fait soit en réglant sa position sur

position: relative; ou position:static; (pas avec position: absolu ni fixe).

Et puis marge: auto; ou marge-droite: auto; marge-gauche: auto;

Dans cet environnement d’alignement du centre de la boîte, la suggestion d’Omar ne fonctionne pas. Cela ne fonctionne pas non plus dans Internet Explorer 8 (pourtant 7,7% du marché). Donc, pour Internet Explorer 8 (et les autres navigateurs), une solution de contournement comme celle présentée dans les autres solutions ci-dessus doit être envisagée.

13
user2931920

Ceci est simplement supposé fonctionner:

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

Je l'ai essayé sur votre démo.

12
ParPar

C'est le moyen le plus simple de le faire si vous avez besoin de plusieurs lignes. Enveloppez votre span 'd dans un autre span et spécifiez sa hauteur avec line-height. Le truc pour plusieurs lignes est de réinitialiser le line-height de span intérieur.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /* Set height */;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /* Set line height back to normal */
}

DÉMO

Bien sûr, la span extérieure pourrait être une div ou ce que vous avez.

4
Hashbrown

Ajoutez un alignement vertical au contenu CSS #column-content strong aussi:

#column-content strong {
    ...
    vertical-align: middle;
}

Voir aussi votre exemple mis à jour .

=== UPDATE ===

Avec une étendue autour de l'autre texte et une autre verticale aligner:

HTML:

... <span>yet another text content that should be centered vertically</span> ...

CSS:

#column-content span {
    vertical-align: middle;
}

Voir aussi le exemple suivant .

3
scessor