先講一下實現(xiàn)的步驟：

最終效果

2. 代碼實現(xiàn)

HTML部分

分類小貼士

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è)置

塊的大小，要實現(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)多張圖片居中顯示。

總結(jié)

到此這篇關(guān)于css實現(xiàn)多張圖片橫向居中顯示的方法的文章就介紹到這了,更多相關(guān)css 圖片橫向居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的网页html 图片横向摆放,css实现多张图片横向居中显示的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。