Home > Web Front-end > CSS Tutorial > How to vertically center images and text in CSS? What are the methods?

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

yulia
Release: 2018-09-12 16:00:48
Original
4528 people have browsed it

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>
Copy after login

Rendering:

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

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>
Copy after login

CSS part:

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

Rendering:

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

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>
Copy after login

CSS part:

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

Rendering:

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

##Summary: The above introduces the different The method to vertically center pictures and text. Different page layouts use different methods. You should choose the method that suits you when using it. I hope this tutorial can help you!

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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template