CSS圖片居底,可以通過設置圖片對齊方式來實現,常用的有以下幾種:
img { vertical-align: bottom; /* 讓圖片底部與文本底部對齊 */ } img { display: block; margin: 0 auto; margin-bottom: 0; /* 將圖片置于父元素底部,垂直居中 */ } .parent { position: relative; } img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); /* 將圖片置于父元素底部,水平居中 */ }
以上代碼分別是使用vertical-align屬性、display屬性和定位方式來實現圖片居底。
其中,第一種方法比較容易理解和掌握,適用于簡單的場景;第二種方法需要將圖片轉換為塊級元素,通過居中的方式實現;第三種方法需要將父元素設置為相對定位,通過絕對定位來實現圖片居底。
在實際項目中,根據具體需求來選擇合適的方法,達到最佳效果。