CSS中多個圖片如何居中?這是一個常見的問題,尤其是網頁設計中需求比較高的情況下。下面我們來介紹幾種方法。
方法一:使用flex布局
.container { display: flex; justify-content: center; align-items: center; } .container img { margin: 0 10px; }
方法二:使用text-align
.container { text-align: center; } .container img { display: inline-block; margin: 0 10px; }
方法三:使用絕對定位
.container { position: relative; } .container img { position: absolute; left: 50%; transform: translateX(-50%); margin: 0 10px; }
方法四:使用網格布局
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-items: center; align-items: center; } .container img { margin: 0 10px; }
以上幾種方法都可以實現多個圖片的居中,選擇哪種方法主要看具體情況和個人習慣。
下一篇css中天藍色背景