Comment puis-je faire en sorte que img et span soient centrés verticalement dans un div ?-tutoriel HTML-php.cn

Comment puis-je faire en sorte que img et span soient centrés verticalement dans un div ?

php中世界最好的语言

Libérer： 2018-01-20 09:59:13

original

7295 Les gens l'ont consulté

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>

Copier après la connexion

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!