Aligner verticalement le texte à côté d'une image?

Question

Pourquoi vertical-align: middle ne fonctionne-t-il pas? Et pourtant, vertical-align: top fonctionne .

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Answer 1

En fait, dans ce cas, c’est très simple: appliquez l’alignement vertical à l’image. Comme tout est sur une ligne, c’est vraiment l’image que vous voulez aligner, pas le texte.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Testé en FF3.

Vous pouvez maintenant utiliser flexbox pour ce type de présentation.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Answer 2

Voici quelques techniques simples pour aligner verticalement:

Alignement vertical sur une ligne: milieu

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

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

Alignement vertical de plusieurs lignes: en bas

Positionnez absolument une 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 de plusieurs lignes: 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'Internet Explorer < = 7

Pour que cela fonctionne correctement dans tous les domaines, vous devrez modifier un peu le CSS. Heureusement, il y a un bug IE qui joue en notre faveur. Si vous définissez top:50% sur le conteneur et top:-50% sur la division interne, vous pouvez obtenir 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 variable du conteneur vertical-align: middle

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

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

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

Answer 3

Modifiez votre div dans un conteneur flexible:

div {display:flex;}

Il existe maintenant deux méthodes pour centrer les alignements sur tout le contenu:

Méthode 1:

div {align-items:center;}

DEMO

Méthode 2:

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

DEMO

Essayez différentes valeurs de largeur et de hauteur sur le img et différentes valeurs de taille de police sur le span et vous verrez qu'elles restent toujours au centre du conteneur.

Answer 4

Vous devez appliquer vertical-align: middle aux deux éléments pour le centrer parfaitement.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

La réponse acceptée centre l’icône autour de la moitié de la hauteur x du texte à côté de celle-ci (comme défini précédemment). dans les spécifications CSS ). Ce qui pourrait suffire mais qui peut paraître un peu gênant si le texte contient des ascendeurs ou des descendeurs se démarquant juste en haut ou en bas:

À gauche, le texte n'est pas aligné, à droite, comme indiqué ci-dessus. Vous trouverez une démonstration en direct dans cet article sur vertical-align .

Quelqu'un a-t-il expliqué pourquoi vertical-align: top fonctionne dans le scénario? . L'image de la question est probablement plus haute que le texte et définit donc le bord supérieur de la zone de ligne. top sur l’élément span, il suffit de le positionner en haut de la ligne.

La principale différence de comportement entre <=> et <=> réside dans le fait que le premier déplace des éléments par rapport à la ligne de base de la boîte (qui est placé en fonction des besoins pour respecter tous les alignements verticaux et donne donc l'impression d'être imprévisible ) et le second par rapport aux limites extérieures de la boîte de ligne (ce qui est plus tangible).

Answer 5

La technique utilisée dans la réponse acceptée ne fonctionne que pour un texte simple ( démo ) , mais pas le texte multiligne ( démo ) - comme indiqué ici.

Si vous avez besoin de centrer verticalement un texte multiligne sur une image, voici quelques méthodes (Méthodes 1 et 2 inspirées de cet article relatif à CSS-Tricks )

Méthode n ° 1: tableaux CSS ( >> IE8 + ( caniuse ))

CSS:

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

Méthode n ° 2: pseudo-élément sur le conteneur ( FIDDLE ) (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 ( FIDDLE ) (< un href = "http://caniuse.com/flexbox" rel = "noreferrer"> caniuse )

CSS (le violon ci-dessus contient des préfixes de fournisseur):

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

Answer 6

Ce code fonctionne dans IE ainsi que dans FF:

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

Answer 7

Parce que vous devez définir le line-height à la hauteur de la div pour que cela fonctionne

Answer 8

En gros, vous devrez passer à CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Answer 9

Pour l'enregistrement, alignement " commandes " ne devrait pas fonctionner sur un SPAN, car il s'agit d'une balise en ligne , et non d'une balise au niveau du bloc . Des éléments tels que l'alignement, la marge, le remplissage, etc. ne fonctionneront pas sur une balise en ligne, car le point en ligne n'est pas de perturber le flux de texte.

CSS divise les balises HTML en deux groupes: en ligne et au niveau du bloc. Recherche & Quot; bloc css vs inline & Quot; et un bon article apparaît ...

http://www.webdesignfromscratch.com/html-css / css-block-and-inline /

(Comprendre les principes CSS fondamentaux est la clé pour que cela ne soit pas aussi gênant)

Answer 10

Utilisez line-height:30px pour l'étendue de sorte que le texte soit aligné sur l'image:

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

Answer 11

Une autre chose que vous pouvez faire est de définir le line-height texte du texte sur la taille des images comprises dans <div>. Puis définissez les images sur vertical-align: middle;

C'est sérieusement le moyen le plus simple.

Answer 12

Je n'ai pas encore trouvé de solution avec margin dans ces réponses. Voici donc ma solution à ce problème.

Cette solution ne fonctionne que si vous connaissez la largeur de votre image.

Le code HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

Le CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

Answer 13

background:url(../images/red_bullet.jpg) left 3px no-repeat;

J'utilise généralement 3px à la place de top. En augmentant / diminuant cette valeur, l'image peut être modifiée à la hauteur requise.

Answer 14

Écrivez ces propriétés de span

span{
    display:inline-block;
    vertical-align:middle;
}

Utiliser display:inline-block; lorsque vous utilisez vertical-align propriété. Ce sont les propriétés associées

Answer 15

Vous pouvez définir l'image comme inline element à l'aide de display propriété

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Answer 16

Par exemple, sur un bouton de jQuery mobile, vous pouvez le modifier légèrement en appliquant ce style à l'image:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Answer 17

Solution multiligne:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Fonctionne dans tous les moteurs et ie9 +

Answer 18

Cela peut être déroutant, je suis d’accord. Essayez d'utiliser les fonctionnalités de la table. J'utilise cette astuce CSS simple pour positionner les modaux au centre de la page Web. Il prend en charge un large navigateur:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

et la partie CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Notez que vous devez styler et ajuster la taille du conteneur d’images et de tableaux pour le faire fonctionner à votre guise. Profitez.

Answer 19

Tout d'abord, le CSS en ligne n'est pas recommandé du tout, il gâche vraiment votre code HTML.

Pour aligner une image et une plage, vous pouvez simplement faire vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Answer 20

Vous voulez probablement ceci:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Comme d'autres l'ont suggéré, essayez vertical-align sur l'image:

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

CSS n'est pas ennuyeux. Vous ne devez tout simplement pas lire la documentation . ; P