What to do if css text and images are not aligned

Solution to the misalignment of css text and images: 1. Open the corresponding HTML file; 2. Find the text and image tags; 3. Add an attribute to the image as "img {width: 20px; vertical -align: middle;}" to align text and images.

The operating environment of this tutorial: Windows 10 system, HTML5&&CSS3 version, DELL G3 computer

#What to do if the css text and pictures are not aligned ?

css solves the problem that text and pictures are not on the same horizontal line

Usually pictures are aligned at the top by default, while text is aligned at the bottom by default, so we often encounter this problem during layout There is a problem that pictures and text cannot be aligned.

The solution is very simple. We only need to add an attribute to the image.

img {
  width         : 20px;
  vertical-align: middle;
}
 
vertical-align: text-top;    //顶部对齐
vertical-align: middle;      //居中对齐
vertical-align: text-bottom; //底部对齐

Recommended learning: "css video tutorial"

The above is the detailed content of What to do if css text and images are not aligned. For more information, please follow other related articles on the PHP Chinese website!