Cette fois, je vais vous montrer comment centrer verticalement img et span dans un div Quelles sont les précautions pour centrer verticalement img et span dans un div ? Ce qui suit est un cas pratique, jetons un coup d'œil.
<html>
<head>
<style>
#test *{vertical-align:middle;}
</style>
<body>
<div
id="test">
<img
src="http://127.0.0.1:7001/wsc/images/message.png"/>
<span>sdfhsdhfdksfjhtes:</span>
</div>
</body>
</html>Veuillez noter : #test *{vertical-align:middle;}s
#test * représente tous les éléments du div, y compris les éléments span, input et img. .
alignement vertical
Valeur initiale : ligne de base (valeur par défaut)
Héritable : Non
Applicable à : éléments en ligne
Description : alignement vertical : la ligne de base crée l'élément La ligne de base est aligné avec la ligne de base de l’élément parent.
Attention : l'alignement vertical ne peut pas affecter l'alignement du contenu dans les cellules du tableau, ni le contenu des éléments de bloc.
Veuillez noter : l'alignement vertical n'affecte que les éléments en ligne, tels que span, img, em, input, a, etc., mais n'est pas valide pour les éléments de bloc tels que div, h3, p, etc.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser le serveur sse de h5 pour envoyer des événements EventSource
Le stockage local de H5 et les détails de la base de données locale Introduction
Utiliser H5 et C3 pour obtenir un effet d'horloge simple
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!
La fonction de la balise span
La différence entre div et span
Comment vider l'espace des documents cloud WPS lorsqu'il est plein ?
Les technologies de base du système d'analyse du Big Data comprennent
Quel fichier est Windows.old ?
paramètres de compatibilité du navigateur Edge
Dernières cotations Bitcoin
Code écran bleu de l'ordinateur 0xc0000225
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
