要實現兩張圖片并列居中,我們需要使用CSS來定義布局和樣式。下面是一個示例代碼:
.container{ display: flex; justify-content: center; align-items: center; } .image{ width: 50%; margin: 0 10px; }
首先,我們使用了Flexbox布局,它使容器內的元素可以縱向或橫向排列,并根據需要進行對齊和分配空間。我們將容器的顯示屬性設置為flex
,使其成為 Flexbox 容器。然后,我們將justify-content
和align-items
屬性分別設置為center
,使兩張圖片垂直和水平居中。
接下來,我們將圖片的寬度設置為50%,以使它們占用容器的一半寬度。然后,我們使用margin
屬性將每個圖像在左右兩側留出10像素的空白。
最后,我們在HTML
中創造一個容器可以放兩張圖片。
<div class="container"> <img class="image" src="image1.jpg"> <img class="image" src="image2.jpg"> </div>
以上是CSS實現兩張圖片并列居中的方法,希望對你有所幫助。