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 <= 7<= 7

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>