Maison > interface Web > tutoriel CSS > Comment égaliser la hauteur des images et du texte en CSS

Comment égaliser la hauteur des images et du texte en CSS

藏色散人
Libérer: 2022-12-30 11:11:47
original
4110 Les gens l'ont consulté

Comment définir la même hauteur des images et du texte en CSS : 1. Ajoutez l'attribut CSS "vertical-align:middle;" 2. Mettez l'image et le texte respectivement dans un div, puis utilisez le attribut margin pour obtenir la hauteur de l'image et du texte. Le texte et d'autres effets élevés suffisent.

Comment égaliser la hauteur des images et du texte en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

CSS pour aligner les images et le texte sur la même ligne

Tout le monde fait front- fin du développement A cette époque, je rencontrais souvent des balises img et du texte sur la même ligne.

Donc, quand j'ai commencé, j'ai utilisé la disposition flottante pour résoudre le problème de disposition (la compatibilité doit être ajustée et ce n'est pas rentable). Voici quelques autres méthodes :

. 1. Ajoutez l'attribut CSS : vertical-align:middle;

Code :

<style>
a img{border:none} .testdiv *{ vertical-align:middle; }
</style>
<div class="testdiv">
<a href="http://www.zc144.com/">
<img src="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/>
</a>
<span>这里是文字,看看文字对齐了没</span>
</div>
Copier après la connexion

Définissez l'attribut d'alignement vertical de chaque objet, description de l'attribut :

baseline-将支持valign特性的对象的内容与基线对齐 
sub-垂直对齐文本的下标 
super-垂直对齐文本的上标 
top-将支持valign特性的对象的内容与对象顶端对齐 
text-top-将支持valign特性的对象的文本与对象顶端对齐 
middle-将支持valign特性的对象的内容与对象中部对齐 
bottom-将支持valign特性的对象的文本与对象底端对齐 
text-bottom-将支持valign特性的对象的文本与对象顶端对齐
Copier après la connexion

2.div imbrication : placez un div sur l'image et le texte respectivement, et vous pouvez utiliser la marge pour vous familiariser avec le positionnement arbitraire

Code :

<style>
a img{border:none} .testIMG{ float:left; display:inline; margin-top:0; margin-left:5px; } .testTXT{ float:left; display:inline; margin-top:20; margin-left:5px; }
</style>
<div class="testdiv">
<div class="testIMG">
<a href="">
<img src="Template.jpg" alt="这里是图片"/></a>
</div>
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>
Copier après la connexion

Utilisez l'image comme arrière-plan :

Si votre image est juste Elle est utilisée comme une petite icône à placer sur le côté gauche du texte. Cette méthode est recommandée. L'image est définie comme arrière-plan du texte, ne fait pas de boucle, est positionnée vers le haut. en bas sur le côté gauche, et le texte est complété vers la gauche en ajoutant quelques pixels à la largeur de l'image.

Code :

<style>
 a img{border:none} .testTXT{ height:60px; line-height:60px; padding-left:65px; background:url(http://www.zc144.com/download/Template.jpg) no-repeat left center }
</style>
<div class="testdiv">
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal