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

目前創(chuàng)新互聯(lián)建站已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計、安居網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

代碼實現(xiàn)

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

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

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

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

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

文章名稱：css如何實現(xiàn)多張圖片橫向居中顯示
網(wǎng)頁路徑：http://chinadenli.net/article16/gpdgdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)網(wǎng)站制作、域名注冊、云服務(wù)器、定制開發(fā)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)