How to use CSS to display multiple images horizontally in the center

Let me first talk about the implementation steps:

Final result

2. Code Implementation

HTML Part

   <div class="main">
  <div class="tag">
   Category Tips</div>
  <div class="images" >
   <div class="mid">
    <img src="images/06.jpg" />
   </div>
   <div class="mid">
    <img src="images/05.jpg" />
   </div>
   <div class="mid">
    <img src="images/07.jpg" />
   </div>
   <div class="mid">
    <img src="images/11.jpg" />
   </div>
   <div class="mid">
    <img src="images/14.jpg" />
   </div>
  </div>
  <div style="clear:both;"></div>
  <div style="margin-bottom:30px;">
  </div>

CSS Part

 .main{
  width:100%;
  margin-top:40px;
 }
 .main .tag{
  margin:0 auto;
  width:200px;
  font-size:18px;
  border-bottom:1px solid #878787;
  text-align:center;
  margin-bottom:20px;
 }
 .main .images{ 
        margin:0 auto;
  width:1300px; //Set the size of the <div> block. To achieve the centering effect, calculation is required.}
 .main .images .mid{
     float: left; //Set left alignment margin: 5px; //Image edge spacing}  
 .main .images .mid img{
     width:250px;//Standard image length and width height:300px;
 }

To display multiple images in the div block in the center, calculations are required. I used a total of 5 images, each with a width of 250px and a height of 300px, plus the edge spacing of each image is 5px, so

The width of the div block should be 5 times 250 (px: the width of the five images) plus 10 times 5 (px: the four intervals multiplied by two and the first and last edges, a total of ten edges), the result is 1300px

Idea: The large div block contains small div blocks, and the small div blocks are used to hold pictures. The width of the large div block is calculated according to the size of the pictures, so that multiple pictures can be displayed in the center.

Summarize

This is the end of this article about how to use CSS to horizontally center multiple images. For more information about how to horizontally center images with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!