Aligner verticalement le texte à côté d'une image?
Pourquoi vertical-align: middle ne fonctionne-t-il pas? Et pourtant, vertical-align: topfonctionne fonctionne.
span{
vertical-align: middle;
}<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>En fait, dans ce cas, c'est très simple: appliquez l'alignement vertical à l'image. Comme tout est sur une ligne, il s’agit bien de l’image que vous voulez aligner, pas du 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>Voici quelques techniques simples pour l'alignement vertical:
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>
Lignes multiples verticales: bas
Positionner 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>
Lignes multiples à alignement vertical: 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 versions anciennes de IE <= 7
Pour que cela fonctionne correctement dans tous les domaines, vous devrez un peu hacker le CSS. Heureusement, il y a un bogue IE qui joue en notre faveur. Si vous définissez top:50% sur le conteneur et top:-50% sur le div interne, vous pouvez obtenir le même résultat. Nous pouvons combiner les deux en utilisant une autre fonctionnalité que 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 alignée verticalement: milieu
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 trois 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%);
Remplacez votre div par un conteneur flexible:
div {display:flex;}
Il existe maintenant deux méthodes pour centrer les alignements pour tout le contenu:
Méthode 1:
div {align-items:center;}
Méthode 2:
div * {margin-top:auto; margin-bottom:auto;}
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.
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>Le réponse acceptée centre l'icône sur la moitié de la hauteur x du texte à côté (comme défini dans le spécifications CSS ). Ce qui peut suffire mais peut paraître un peu gênant si le texte comporte des ascendeurs ou des descendeurs se démarquant juste en haut ou en bas:
A gauche, le texte n'est pas aligné, à droite c'est comme ci-dessus. Une démo en direct peut être trouvée dans ce article sur vertical-align .
Quelqu'un a-t-il déjà expliqué pourquoi vertical-align: top fonctionne dans le scénario? L'image dans la question est probablement plus haute que le texte et définit donc le bord supérieur. de la boîte de ligne. vertical-align: top sur l'élément span, puis placez-le simplement en haut de la zone de ligne.
La principale différence de comportement entre vertical-align: middle et top 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é chaque fois que cela est nécessaire pour respecter tous les alignements verticaux et se sent donc plutôt imprévisible =) et le second par rapport aux limites extérieures de la boîte de ligne (qui est plus tangible).
La technique utilisée dans la réponse acceptée ne fonctionne que pour un texte simple ( démo ), mais pas pour un 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 par cet article de CSS-Tricks )
Méthode n ° 1: tables CSS (VIOLON) (IE8 + ( caniuse ))
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) ( caniuse )
CSS (Le violon ci-dessus contient les préfixes de vendeur):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
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>
Parce que vous devez régler le line-height à la hauteur de la div pour que cela fonctionne
Fondamentalement, vous devrez passer à CSS3.
-moz-box-align: center;
-webkit-box-align: center;
Pour mémoire, les "commandes" d’alignement ne devraient pas fonctionner sur un SPAN, car c’est une balise en ligne , pas une balise de niveau 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. Recherchez "css block vs inline" et un excellent article apparaît ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Comprendre les principes de base de la CSS est essentiel pour ne pas être aussi ennuyeux)
Utilisez line-height:30px pour l'étendue de sorte 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>
Une autre chose que vous pouvez faire est de régler le line-height du texte sur la taille des images dans le <div>. Puis définissez les images sur vertical-align: middle;
C'est sérieusement le moyen le plus simple.
Je n'ai pas encore vu de solution avec margin dans aucune de ces réponses. Voici donc ma solution à ce problème.
Cette solution ne fonctionne que si vous connaissez la largeur de votre image.
Le 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;
}
Écrire ces propriétés
span{
display:inline-block;
vertical-align:middle;
}
Utilisez display:inline-block; Lorsque vous utilisez vertical-align property.Ce sont des propriétés associées
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.
Vous pouvez définir l’image comme inline element à l’aide de la propriété display
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>Sur un bouton de 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;
}
Solution multiligne:
<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 +
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 partie CSS:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Notez que vous devez styler et ajuster la taille du conteneur d'image et de tableau pour qu'il fonctionne comme vous le souhaitez. Prendre plaisir.
Tout d'abord CSS en ligne n'est pas recommandé du tout, cela 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>