Verticalement aligner le texte à côté d'une image?

pourquoi vertical-align: middle ne marche pas? Et pourtant, vertical-align: top fait travail.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>
1716
demandé sur ProgramFOX 2009-01-29 00:01:50
la source

20 ответов

en Fait, dans ce cas c'est assez simple: appliquer la verticale aligner à l'image. Puisque tout est en 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.

maintenant vous pouvez utiliser flexbox pour ce type de mise en page.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>
1934
répondu Michael Haren 2018-04-26 15:58:07
la source

voici quelques techniques simples pour l'alignement vertical:

Une ligne vertical-align:middle

celui-ci est facile: réglez la ligne-hauteur de l'élément de texte à égale que celle du conteneur

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

lignes multiples vertical-align: bottom

Position Absolue d'une div intérieure 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>

lignes multiples vertical-align: middle

<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 supporter les anciennes versions de IE < =7

afin d'obtenir que cela fonctionne correctement, vous devrez pirater le CSS un peu. Heureusement, il y a un bug IE qui fonctionne en notre faveur. En plaçant top:50% sur le conteneur et top:-50% sur la div intérieure, vous pouvez obtenir le même résultat. Nous pouvons combiner les deux en utilisant une autre fonctionnalité que IE ne supporte pas: 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>

Variable hauteur du conteneur vertical-aligné: moyen

cette solution nécessite un navigateur un peu plus moderne que les autres solutions, car il fait usage de la propriété transform: translateY . ( http://caniuse.com/#feat=transforms2d )

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

position: relative;
top: 50%;
transform: translateY(-50%);
321
répondu Adam Lassek 2017-10-02 13:25:31
la source

changer votre div en conteneur souple:

div {display:flex;}



Maintenant il y a deux méthodes pour centrer les alignements pour tout le contenu:

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 de hauteur sur le img et différentes valeurs de taille de police sur le span et vous verrez qu'ils restent toujours au milieu du conteneur.

81
répondu Mori 2015-11-24 10:39:30
la source

vous devez appliquer vertical-align: middle aux deux éléments pour qu'il soit parfaitement centré.

<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 de x du texte à côté de lui (tel que défini dans le CSS specs ). Ce qui pourrait être suffisant, mais peut sembler un peu bizarre, si le texte a des ascendants ou des descendants qui ressortent juste en haut ou en bas:

centered icon comparison

à gauche, le texte n'est pas aligné, à droite il est comme indiqué ci-dessus. Une démo en direct est disponible dans cet article de sur l'alignement vertical .

Quelqu'un a-t-il expliqué pourquoi vertical-align: top fonctionne dans le scénario? L'image en question est probablement plus grand que le texte et définit ainsi le bord supérieur de la boîte de ligne. vertical-align: top sur l'élément de portée il suffit alors de le placer en haut de la boîte.

la principale différence de comportement entre vertical-align: middle et top est que le premier déplace les éléments par rapport à la ligne de base de la boîte (qui est placé partout où nécessaire pour remplir tous les alignements verticaux et donc se sent plutôt imprévisible ) et le second par rapport aux limites extérieures de la boîte de ligne (qui est plus tangible).

69
répondu christopheraue 2017-05-23 15:26:35
la source

la technique utilisée dans la réponse acceptée fonctionne seulement pour le texte simple-doublé ( Démo ), mais pas le texte multi-ligne ( Démo ) - comme noté là.

si quelqu'un a besoin de centrer verticalement un texte multicouche sur une image, voici quelques moyens (Méthodes 1 et 2 inspirées par cet article CSS-Tricks )

Méthode #1: tableaux CSS ( FIDDLE ) (IE8+ ( caniuse ))

CSS:

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

Méthode #2: Pseudo-élément sur 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 #3: Flexbox ( FIDDLE ) ( caniuse )

CSS (le violon ci-dessus contient les préfixes du vendeur):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
50
répondu Danield 2018-06-08 02:17:02
la source

ce code fonctionne aussi bien en IE qu'en FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>
23
répondu HTMLnewBie 2013-10-18 01:48:20
la source

parce que vous devez régler le line-height à la hauteur de la div pour que cela fonctionne

17
répondu Ikke 2013-10-18 01:40:05
la source

en gros, vous devez descendre à CSS3.

-moz-box-align: center;
-webkit-box-align: center;
10
répondu Dan 2013-10-18 01:42:25
la source

pour mémoire, les" commandes "d'alignement ne devraient pas fonctionner sur une portée, car il s'agit d'une étiquette" in-line , et non d'une étiquette "block-level . Des choses comme l'alignement, la marge, le rembourrage, etc. ne fonctionneront pas sur une balise en ligne parce que le point d'inline n'est pas de perturber le flux de texte.

CSS divise les balises HTML en deux groupes: en ligne et en bloc. Rechercher "CSS block vs inline" et un grand article apparaît...

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

(Compréhension de base de CSS principes est une solution à ne pas être aussi ennuyeux)

9
répondu David 2011-11-18 17:24:05
la source

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

c'est vraiment la solution la plus facile.

9
répondu nullpoint81 2013-10-18 01:45:41
la source

utilisez line-height:30px pour la portée afin que le texte soit aligné avec l'image:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>
8
répondu Touhid Rahman 2013-05-21 03:50:12
la source

N'ont pas encore vu une solution avec margin dans aucune de ces réponses, donc voici ma solution à ce problème.

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

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

The 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;
}
5
répondu Fleuv 2016-04-10 14:26:02
la source
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 souhaitée.

3
répondu NegativeSpark 2013-10-18 01:48:04
la source

Écrire ces span propriétés

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

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

3
répondu Mr.Pandya 2016-11-08 09:46:32
la source

sur un bouton dans jQuery mobile, par exemple, vous pouvez le modifier un peu en appliquant ce style à l'image:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}
2
répondu den232 2013-10-18 01:50:58
la source

vous pouvez définir l'image comme inline element en utilisant 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>
2
répondu Super User 2017-01-30 17:54:55
la source

Multiline solution:

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 browers et ie9+

1
répondu Benjamin Crouzier 2014-03-21 19:04:56
la source

ça peut être confus, je suis d'accord. Essayez d'utiliser les caractéristiques de la table. J'utilise ce simple truc CSS pour positionner les modaux au centre de la page web. Il a une large prise en charge du navigateur:

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

et partie CSS:

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

notez que vous devez style et ajuster la taille de l'image et table conteneur pour le faire fonctionner comme vous le souhaitez. Profiter.

1
répondu CodeGems 2017-07-06 05:12:31
la source

tout d'Abord CSS n'est pas recommandé du tout, c'est vraiment gâcher votre code HTML.

pour aligner l'image et la portée, 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>
0
répondu Alireza 2017-12-10 03:24:40
la source

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 lisez pas la documentation . ;P

-4
répondu strager 2009-01-29 00:10:00
la source

Autres questions sur css vertical-alignment