How to equalize the height of images and text in css

How to set the same height of images and text in css: 1. Add the css attribute "vertical-align:middle;"; 2. Put the image and text into a div respectively, and then use the margin attribute to achieve the image and text height. Text and other high effects are enough.

The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.

Recommended: css video tutorial

CSS aligns images and text on the same line

Everyone is doing front-end development At that time, I often encountered img tags and text on the same line.

So when I first started, I used float layout to solve the problem. Positioning layout (compatibility needs to be adjusted and it is not cost-effective). Here are some other methods:

1. Add CSS attribute: 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="/static/imghwm/default1.png"  data-src="http://www.zc144.com/download/Template.jpg"  class="lazy"   alt="这里是图片"/>
</a>
<span>这里是文字,看看文字对齐了没</span>
</div>

Set the vertical-align attribute of each object, attribute description:

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

2.div nesting: Put a div on the picture and text respectively, and you can use margin to familiarize yourself with any positioning

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="/static/imghwm/default1.png"  data-src="Template.jpg"  class="lazy"   alt="这里是图片"/></a>
</div>
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>

3. Use the picture as the background:

If your picture is just It is used as a small icon to be placed on the left side of the text. This method is recommended. The picture is set as the background of the text, does not loop, is positioned up and down on the left side, and the text is padded to the left by adding a few pixels to the width of the picture.

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>

The above is the detailed content of How to equalize the height of images and text in css. For more information, please follow other related articles on the PHP Chinese website!