Comment puis-je verticalement aligner le texte à côté d'une image avec du CSS?

Question

Pourquoi ne pas en vertical-align: middle travail? Et pourtant, vertical-align: top n' travail.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

Answer 1

En fait, dans ce cas c'est assez simple: appliquer la verticale aligner à l'image. Puisque c'est sur une seule ligne, c'est vraiment l'image que vous voulez alignés, pas le texte.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Works.</span>
</div>

Testé dans FF3.

Answer 2

Note: IE7 est assez obsolète à ce point, alors vous êtes plus susceptibles sûr à utiliser, display: table-cell.

---

Comme avec la plupart des défauts de CSS dans la nature, c'est la faute de Microsoft pour la prise de onze ans à l'appui. Voici quelques techniques simples pour vertical-align:

Une ligne vertical-align:middle

C'est facile: réglez la hauteur de la ligne de l'élément de texte à l'égalité que le contenant

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Plusieurs lignes vertical-align:bottom

Absolument position intérieure d'un div par rapport à son conteneur

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Plusieurs lignes vertical-align:middle

Celui-ci est un peu délicat. La bonne CSS est de faire ceci:

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">Doesn't work in IE!</div>
</div>

J'afin d'obtenir que cela fonctionne correctement, vous devrez pirater le CSS un peu. Heureusement, il y a un IE bug qui fonctionne en notre faveur. Réglage de top:50% sur le conteneur et le top:-50% sur l'intérieure de la div, vous pouvez obtenir le même résultat. On peut combiner les deux en utilisant une autre caractéristique IE ne prend pas en charge: les sélecteurs CSS avancés.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

N'est-ce pas la norme de façon bien plus agréable?

Les amis ne laissez pas vos amis utilisent Internet Explorer

Answer 3

Changer votre div dans un conteneur flex:

div {display:flex;}

Votre image doit être inflexible et être dimensionnées en fonction de son width et height propriétés:

img {flex:none; width:128px; height:128px;}

Maintenant, il existe deux méthodes pour centre les alignements de tous les contenus:

Méthode 1:

div {align-items:center;}

DÉMO

---

Méthode 2:

div * {margin-top:auto; margin-bottom:auto;}

DÉMO

---

Essayez différentes valeurs de largeur et hauteur sur l' img et la taille de police différente, les valeurs sur l' span et vous verrez qu'ils restent toujours dans le milieu du récipient.

Answer 4

La technique utilisée dans la accepté de répondre ne fonctionne que pour une seule bordée de texte (démo), mais pas de texte multi-ligne (démo) - comme indiqué.

Si quelqu'un a besoin de la verticale du centre de texte sur plusieurs lignes d'une image, voici quelques façons (Méthodes 1 et 2 inspiré par cette CSS-tricks article)

Méthode #1: CSS tables (VIOLON) (IE8+ (caniuse))

CSS:

div
{
    display:table;
}
span
{
    vertical-align: middle;
    display: table-cell;
}

Méthode #2: Pseudo-élément conteneur (VIOLON) (IE8+)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img
{
    position:absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Méthode n ° 3: Flexbox (VIOLON) (caniuse)

CSS (au-dessus de violon contient vendeur préfixes):

div {   
    display: flex; 
    align-items: center;    
}
img
{
    min-width: 200px; /* width of image */
}

Answer 5

Ce code fonctionne sous IE, ainsi que des FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>