html – 使用flexbox水平居中多个图像

概述我遇到的问题是当我向.images容器中添加四个图像时,我应用于在页面上水平居中图像的justify-content：center属性不起作用. 但是,当我在.images容器中只有两个图像时,我会将图像水平居中. 我已经能够找到一种解决方案,通过使用.images容器上的text-align属性水平居中图像.这感觉有点像黑客. CODE PEN HTML <div class="proj_ima 我遇到的问题是当我向.images容器中添加四个图像时,我应用于在页面上水平居中图像的justify-content：center属性不起作用.

但是,当我在.images容器中只有两个图像时,我会将图像水平居中.

我已经能够找到一种解决方案,通过使用.images容器上的text-align属性水平居中图像.这感觉有点像黑客.

CODE PEN

HTML

<div >    <div >        <img  src="http://placehold.it/450x350.png" alt="">        <img  src="http://placehold.it/450x350.png" alt="">        <img  src="http://placehold.it/450x350.png" alt="">        <img  src="http://placehold.it/450x350.png" alt="">    </div></div>

CSS

.proj_images{    display: flex;    wIDth:100%;}.images{ text-align:center;}

解决方法 除了您已有的解决方案之外,您还可以将.images元素的显示设置为flex,然后添加justify-content：center以及flex-wrap：wrap.

当你在.proj_images元素上设置justify-content：center时,那只是以子项为中心的flexBox项目(它们是.images而不是后代的img元素).这就是为什么你需要在img元素的直接父元素上设置这些属性/值(这样img元素本身就是flexBox项目).

.images {  display: flex;  justify-content: center;  flex-wrap: wrap;}

<div >  <div >    <img  src="http://placehold.it/250x150.png" alt="">    <img  src="http://placehold.it/250x150.png" alt="">    <img  src="http://placehold.it/250x150.png" alt="">    <img  src="http://placehold.it/250x150.png" alt="">  </div></div>

总结

以上是内存溢出为你收集整理的html – 使用flexbox水平居中多个图像全部内容，希望文章能够帮你解决html – 使用flexbox水平居中多个图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。