CSS如何讓兩張圖并列居中

經常寫HTML的伴侶，必定都碰到過如許一個問題，若何讓兩張圖并列居中顯示，小編總結了以下方式供參考利用，直接用css實現。

東西/原料

1
打開Visual Studio Code編纂器，小編已籌辦好實現結果的編纂情況，如圖所示
2
起首，先對兩張圖片的外部div做下結構，可以在<style>中界說內嵌樣式，這里界說div的名稱為containder
3
然后界說兩張圖片的css樣式，小編界說img的寬高別離為300px，當然你也可以按照本身的要求來界說，然后在html中插入<img>標簽
4
預覽下html的結果，可以看到，img圖片并沒有相對外部的container這個div為程度居中狀況，該若何解決呢
5
返回到container樣式中，增添兩個很是關頭的樣式，別離是【justify-content: center】和【display: flex】兩個屬性
6
普及下這個屬性的常識，justify-content 用于設置或檢索彈性盒子元素在本家兒軸（橫軸）偏向上的對齊體例，而采用Flex容器結構，將會帶有程度的本家兒軸（main axis）和垂直的交叉軸（cross axis），所有的子元素將都包含在這個容器傍邊
7
增添完這兩個樣式之后，預覽下html結果，就會看到兩個img圖片已經主動居中了
8
為了讓兩個圖片更美不雅一些，最后可以再完美一下，給img設置下離頂部的間距，增添屬性margin-top:50px，如許圖片顯示就更美不雅了