How to vertically center images and text in CSS? What are the methods?

When we work, we often use pictures and text for layout, but careful friends will find that by default, HTML aligns pictures at the top and text at the bottom, so when the picture is high and the text is low, it cannot be centered. Alignment. In order to make the page beautiful, we are used to setting the alignment of pictures and text. So how do we set the vertical centering of text and pictures in CSS? What are some ways to vertically center text and images?

Method 1: Simple and crude way, directly use the CSS attribute vertical-align: middle, the code is as follows:

<img  src="img/second_logo.png"   style="max-width:90%"/ alt="How to vertically center images and text in CSS? What are the methods?" ><a href="#">哈哈哈</a>

Rendering:

Method 2: If the image is added through a background image, you can use background, line-height=height settings to achieve vertical center alignment of text and images. The code is as follows:

HTML part:

<div class="aa">
   <a href="">哎呦呦</a>
</div>

CSS part:

.aa{
       width: 200px;
       height: 100px;
       line-height: 100px;          
       background: url(img/pic4.png) no-repeat left center;          
      }
.aa a{padding-left: 80px;}

Rendering:

Method 3: If the image and text are placed in two different divs, we can set them through display: inline-block and vertical-align: middle to center the image and text vertically. The code is as follows:

HTML part:

<div>
    <div class="aa"><img  src="img/pic1.png" alt="How to vertically center images and text in CSS? What are the methods?" ></div>
    <div class="bb"><a href="">啦啦啦</a></div>
</div>

CSS part:

.aa{
    display: inline-block;
    vertical-align: middle;
    }
 .bb{
     display: inline-block;
     }

Rendering:

The above is the detailed content of How to vertically center images and text in CSS? What are the methods?. For more information, please follow other related articles on the PHP Chinese website!