css如何實現多張圖片橫向居中顯示

這篇文章將為大家詳細講解有關css如何實現多張圖片橫向居中顯示，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

代碼實現

HTML部分

   <div class="main">
  <div class="tag">
   分類小貼士
  </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部分

 .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;//設置<div>塊的大小，要實現居中效果需要經過計算
 }
 .main .images .mid{
     float: left;//設置左對齊
     margin:5px;//圖片邊緣間隔
 }  
 .main .images .mid img{
     width:250px;//規范圖片長寬
     height:300px;
 }

要想顯示 div 塊里面的多張圖片居中顯示是要經過計算的，我一共使用了5張圖片，每張都是寬是 250px，高是 300px，再加上每張圖片的邊緣間隔為 5px，那么

div 塊的寬度應該是 5 乘以 250(px：五張圖片寬度) 再加上 10 乘以 5(px：四個間隔乘以二和首和尾一共十個邊緣)，結果是 1300px

思路：大 div 塊包含小 div 塊，用小 div 塊來裝圖片，根據圖片大小計算大 div 塊的寬度，從而實現多張圖片居中顯示。

關于“css如何實現多張圖片橫向居中顯示”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。