Question

我遇到的问题是当我向.images容器中添加四个图像时，justify-content:center属性我将应用于在页面上水平居中显示图像不起作用。

然而，当我在.images容器内只有两个图像时，我会将图像水平居中。

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

http://www.showstyle.lu/fr/

HTML

<div class="proj_images">
    <div class="images">
        <img class="disp1" src="http://placehold.it/450x350.png" alt="">
        <img class="disp2" src="http://placehold.it/450x350.png" alt="">
        <img class="disp3" src="http://placehold.it/450x350.png" alt="">
        <img class="disp4" src="http://placehold.it/450x350.png" alt="">
    </div>
</div>

CSS

.proj_images{
    display: flex;
    width:100%;

}

.images{
 text-align:center;
}

Answer 1

除了您已有的解决方案之外，您还可以将dispatch_get_global_queue(qos_class_self(), 0)元素的display设置为.images，然后将flex与{{1}一起添加}}

当您在justify-content: center元素上设置flex-wrap: wrap时，这只是子项Flexbox项目的中心（justify-content: center而不是后代.proj_images元素。这就是为什么你需要在.images元素的直接父元素上设置这些属性/值（以便img元素本身就是flexbox项目。）

＆＃13;

img

＆＃13;

img

＆＃13;

Answer 2

创建弹性容器时（通过将display: flex或display: inline-flex应用于元素），子元素将成为弹性项目。灵活容器的后代超出子项不会成为弹性项目，因此不接受弹性属性。

当您为.proj_images设置Flex容器时，flex属性适用于单个Flex项：.images。要将弹性属性应用于四个图像，请将display: flex添加到.images。

此外，当您建立Flex容器时，有几个默认规则生效。其中两条规则是flex-direction: row和flex-wrap: nowrap。如果您希望图像垂直对齐或换行，则需要使用flex-direction: column和flex-wrap: wrap覆盖这些默认值。

有关水平（和垂直）居中弹性项目居中的详细信息，请参阅我的答案：https://stackoverflow.com/a/33049198/3597276

使用flexbox水平居中多个图像

HTML

CSS

2 个答案: