Comment aligner verticalement le texte avec l'image ?

Question

为什么 alignement vertical : milieu 不起作用？然而， vertical-align: top 确实有效。

span{
  alignement vertical : milieu ;
}</pré>
<pre class="brush:html;toolbar:false;"><div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Ne fonctionne pas.</span>
</div>

Answer 1

Voici quelques techniques simples pour l'alignement vertical :

Alignement vertical sur une seule ligne : milieu

Celui-ci est simple : définissez la hauteur de ligne de l'élément de texte égale à la hauteur de ligne du conteneur

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

Alignement vertical multiligne : bas

Positionnez absolument le div interne 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>

Alignement vertical multiligne : milieu

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Si vous devez prendre en charge les anciennes versions d'IE

Pour que cela fonctionne pleinement, vous devrez apporter quelques modifications au CSS. Heureusement, il existe un bug d'IE qui joue en notre faveur. La définition de top:50% ，在内部 div 上设置 top:-50% sur le conteneur donne le même résultat. Nous pouvons combiner les deux en utilisant une autre fonctionnalité qu'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>

Hauteur du conteneur variable, alignement vertical : milieu

Cette solution nécessite un navigateur légèrement plus moderne que les autres solutions car elle utilise l'attribut transform:translateY. (http://caniuse.com/#feat=transforms2d)

L'application des 3 lignes CSS suivantes à un élément le centrera verticalement au sein de son élément parent, quelle que soit la hauteur de l'élément parent :

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

En fait, dans ce cas, c'est très simple : appliquez un alignement vertical à l'image. Puisque tout est sur une seule ligne, vous alignez en fait l’image, pas le texte.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>