Que dois-je faire si le texte derrière l'image CSS ne peut pas être centré ?

La solution au problème selon lequel le texte derrière l'image CSS ne peut pas être centré : créez d'abord un exemple de fichier HTML ; puis disposez une image et un texte et enfin, ajoutez le style "vertical-align: middle" au ; image et texte respectivement.

L'environnement d'exploitation de ce tutoriel : système windows7, version css3, ordinateur thinkpad t480.

Recommandé : "Tutoriel vidéo CSS"

Le texte après l'image CSS ne peut pas être centré ?

Par exemple, maintenant, pour créer un simple bouton de suppression, composé uniquement d'une icône et du mot "supprimer", je vous donne 30 secondes pour réfléchir à la manière dont vous allez le disposer.

Bon, montrez d'abord le code HTML comme suit :

<div class="del"><span class="icon"></span><span>删除</span></div>

C'est très simple, il y a deux balises span sous un élément div avec la classe del. Bien sûr, vous pouvez aussi remplacer directement l'icône. avec un pseudo élément (je ne connais toujours pas les pseudo-éléments et la réflexion sur le passé...).

Ensuite, vous pourriez écrire du CSS comme ceci :

.del {
font-size: 18px;
}
.del .icon {
display: inline-block;
width: 16px;
height: 24px;
margin-right: 5px;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}

Ensuite, cela ressemblera à ceci :

Hein ? Cela semble différent de ce que j'imaginais ! Pourquoi les images et le texte ne peuvent-ils pas être alignés verticalement ? Pourquoi ?

Cela est dû au fait que les images et le texte sont alignés verticalement avec la ligne de base par défaut à l'intérieur de la ligne. La ligne de base de l'image est au bas de l'image, mais la ligne de base du texte est en dessous du point médian de la ligne. le texte. C'est pourquoi cela se produit. Affiché comme indiqué ci-dessus. Alors comment résoudre ce problème ?

C'est très simple. Il suffit d'ajouter respectivement vertical-align: middle à l'image et au texte :

.del .icon {
display: inline-block;
width: 18px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}
.del span {
vertical-align: middle;
}

Dans ce cas, l'image et le texte seront alignés avec leurs lignes centrales :

Description : L'attribut

vertical-align définit l'alignement vertical de l'élément.

L'attribut vertical-align définit l'alignement vertical de la ligne de base d'un élément en ligne par rapport à la ligne de base de la ligne dans laquelle se trouve l'élément. Permet de spécifier des valeurs de longueur négatives et des valeurs de pourcentage. Cela abaisse l'élément au lieu de l'élever. Dans les cellules d'un tableau, cette propriété définit l'alignement du contenu des cellules dans la zone de cellule.

Utilisez vertical-align:middle pour placer l'élément au milieu de l'élément parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!