Home  >  Article  >  Web Front-end  >  What to do if css text and images are not aligned

What to do if css text and images are not aligned

藏色散人
藏色散人Original
2023-01-28 11:11:023039browse

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.

What to do if css text and images are not aligned

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.

What to do if css text and images are not 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn