CSS如何让两张图并列居中

经常写HTML的伴侣，必定都碰到过如许一个问题，若何让两张图并列居中显示，小编总结了以下方式供参考利用，直接用css实现。

东西/原料

• Visual Studio Code编纂器
• Dreamweaver
• 两张图片

方式/步调

1. 1

   打开Visual Studio Code编纂器，小编已筹办好实现结果的编纂情况，如图所示

   
2. 2

   起首，先对两张图片的外部div做下结构，可以在<style>中界说内嵌样式，这里界说div的名称为containder

   
3. 3

   然后界说两张图片的css样式，小编界说img的宽高别离为300px，当然你也可以按照本身的要求来界说，然后在html中插入<img>标签

   
4. 4

   预览下html的结果，可以看到，img图片并没有相对外部的container这个div为程度居中状况，该若何解决呢

   
5. 5

   返回到container样式中，增添两个很是关头的样式，别离是【justify-content: center】和【display: flex】两个属性

   
6. 6

   普及下这个属性的常识，justify-content 用于设置或检索弹性盒子元素在本家儿轴（横轴）偏向上的对齐体例，而采用Flex容器结构，将会带有程度的本家儿轴（main axis）和垂直的交叉轴（cross axis），所有的子元素将都包含在这个容器傍边

   
7. 7

   增添完这两个样式之后，预览下html结果，就会看到两个img图片已经主动居中了

   
8. 8

   为了让两个图片更美不雅一些，最后可以再完美一下，给img设置下离顶部的间距，增添属性margin-top:50px，如许图片显示就更美不雅了