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，如许图片显示就更美不雅了