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


Pourquoi pas vertical-align: middle travail? Et encore, vertical-align: top  Est-ce que travail.

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

1684
2018-01-28 21:01


origine


Réponses:


En fait, dans ce cas, c'est assez simple: appliquez l'alignement vertical à l'image. Puisque tout est dans 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 mise en page.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1899
2018-01-28 21:10



Voici quelques techniques simples pour l'alignement vertical:

Vertical-aligner sur une ligne: milieu

Celui-ci est facile: définissez la ligne-hauteur de l'élément de texte pour égaler celle du conteneur

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

Vertical-aligner plusieurs lignes: bottom

Positionner absolument une div interne par rapport à son contenant

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

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

Pour que cela fonctionne correctement dans tous les domaines, vous devrez pirater un peu le CSS. Heureusement, il existe un bug IE qui fonctionne en notre faveur. Réglage top:50% sur le conteneur et top:-50% sur la div interne, vous pouvez obtenir le même résultat. Nous pouvons combiner les deux en utilisant une autre fonctionnalité que l'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>

Hauteur du conteneur variable vertical-align: middle

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

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

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

317
2018-01-28 21:45



Change ton div dans un conteneur flexible:

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;}

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'ils restent toujours au milieu du conteneur.


79
2018-03-24 07:54



Vous devez appliquer vertical-align: middle aux deux éléments de l'avoir parfaitement centré.

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

le réponse acceptée centre l'icône autour de la moitié de la hauteur x du texte à côté (comme défini dans le Spécifications CSS). Ce qui peut être assez bon mais peut sembler un peu plus large, si le texte a des ascendants ou des descendants qui se détachent juste en haut ou en bas:

centered icon comparison

Sur la gauche, le texte n'est pas aligné, sur la droite c'est comme indiqué ci-dessus. Une démo en direct peut être trouvée dans ce article sur l'alignement vertical.

Quelqu'un at-il parlé de pourquoi vertical-align: top travaille dans le scénario? L'image dans la question est probablement plus grande que le texte et définit ainsi le bord supérieur de la boîte de ligne. vertical-align: top sur l'élément span, il suffit de le positionner en haut de la boîte de ligne.

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


68
2017-09-11 12:58



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

Si quelqu'un a besoin de centrer verticalement un texte à plusieurs lignes sur une image, voici quelques façons (Méthodes 1 et 2 inspirées par cet article CSS-Tricks)

Méthode 1: Tables CSS (VIOLON) (IE8 + (puis-je utiliser))

CSS:

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

Méthode n ° 2: Pseudo élément sur le 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) (puis-je utiliser)

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

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

47
2017-12-24 21:06



Ce code fonctionne dans IE ainsi que FF:

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

23
2017-07-02 14:41



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


16
2018-01-28 21:05



Fondamentalement, vous devrez descendre à CSS3.

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

9
2017-11-29 18:24



Pour l'enregistrement, alignement "commandes" ne devrait pas fonctionner sur un SPAN, car il est un en ligne tag, pas un bloc-niveau marque. Des choses comme l'alignement, la marge, le remplissage, etc. ne fonctionneront pas sur une balise en ligne car le but de l'inline n'est pas de perturber le flux de texte.

CSS divise les balises HTML en deux groupes: en ligne et en bloc. Recherche "css bloc vs inline" et un super article montre ...

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

(Comprendre les principes CSS de base est une clé pour ne pas être si ennuyeux)


8
2017-11-18 13:24