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

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

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

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

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