Question Est-il possible d'aligner verticalement du texte dans une div? [dupliquer]


Cette question a déjà une réponse ici:

Le code ci-dessous (également disponible en une démo sur JS Fiddle) ne positionne pas le texte au milieu, comme je le souhaite idéalement. Je ne trouve aucun moyen de centrer le texte verticalement dans un div, même en utilisant le margin-top attribut. 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;        
}

543
2018-02-12 14:00


origine


Réponses:


Créez un conteneur pour votre contenu texte, 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


382
2018-02-12 14:06



Andres Ilich a raison. Juste au cas où quelqu'un manquerait 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;
}

Cliquez pour démo

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 */
}

Cliquez pour démo


584
2018-02-13 09:36



Mise à jour le 10 avril 2016

Les Flexbox devraient maintenant être utilisées pour aligner verticalement (ou même horizontalement) les éléments.

<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 de flexbox peut être lu sur Astuces CSS. Merci Ben (de commentaires) pour avoir souligné, n'a 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;

}

159
2017-11-02 09:31



C'est un vieux fil mais la réponse acceptée ne fonctionne pas pour le texte multi-ligne et c'est le meilleur résultat dans google. J'ai mis à jour le jsfiddle pour afficher le texte multiligne css aligner vertical 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 autre ..."


59
2017-07-17 13:30



Essaye ça:

HTML

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

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

24
2018-04-03 21:14



Ceci est simplement supposé fonctionner:

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

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


10
2018-02-12 14:25



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

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

Le problème avec le code d'Omar, sinon opérationnel, se pose lorsque vous voulez centrer la boîte dans l'écran ou dans son ancêtre immédiat. Ce centrage se fait soit en positionnant sa position sur

position: relative; ou position:static; (pas avec la position: absolue ou fixe).

et alors marge: auto; ou marge-droite: auto; marge-gauche: auto;

Sous cet environnement d'alignement de centre de boîte, la suggestion d'Omar ne fonctionne pas. Ne fonctionne pas non plus dans IE8 (encore 7,7% de part de marché). Donc, pour IE8 (et d'autres navigateurs), une solution de contournement comme vu dans les autres solutions ci-dessus doit être considérée.


4
2017-11-11 00:33



Ajouter un alignement vertical à la css #column-content strong aussi:

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

Voir aussi votre exemple mis à jour.

=== UPDATE ===

Avec une portée autour de l'autre texte et un autre alignement vertical:

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
2018-02-12 14:12



C'est la manière la plus simple de le faire si vous avez besoin de plusieurs lignes. Enveloppez-vous span'd texte dans un autre span et spécifiez sa hauteur avec line-height. L'astuce à plusieurs lignes est de réinitialiser l'intérieur spande line-height.

<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*/
}

DEMO

Bien sûr, l'extérieur span pourrait être un div ou whathaveyou


3
2017-10-01 01:25



Je sais que c'est totalement stupide et vous ne devriez normalement pas utiliser de tables quand vous ne créez pas de tables mais: Les cellules de table peuvent aligner plusieurs lignes de texte verticalement centrées et même le faire par défaut. Donc, une solution qui fonctionne assez bien pourrait être quelque chose comme ceci:

html:

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

css: (rend l'objet de la table toujours adapté à la boîte div)

.box {
  /* for example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

vois ici: http://www.cssdesk.com/LzpeV


-2
2017-10-15 10:57