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

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.

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>

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特性的对象的文本与对象顶端对齐

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>

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>

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!