在CSS中,您可以使用多種方法將兩張圖片居中,以下是一種簡單有效的方法:
確保您的HTML文檔中有兩個(gè)圖片元素,
<div> <img src="image1.png" alt="Image 1"> <img src="image2.png" alt="Image 2"> </div>
使用CSS來居中這些圖片,您可以使用display: flex
屬性來實(shí)現(xiàn):
div { display: flex; justify-content: center; align-items: center; }
這段CSS代碼會(huì)將div元素中的子元素(即圖片)水平和垂直居中。justify-content: center
負(fù)責(zé)水平居中,而align-items: center
則負(fù)責(zé)垂直居中。
如果您希望圖片在頁面中居中,而不是在特定的div元素中,您可以將display: flex
屬性應(yīng)用到body
元素上:
body { display: flex; justify-content: center; align-items: center; }
這種方法會(huì)將頁面中的所有內(nèi)容(包括圖片)居中,請(qǐng)注意,這種方法可能會(huì)影響頁面的整體布局,因此在使用時(shí)需要謹(jǐn)慎。