为什么调整项目中心不起作用？

Question

这是我尝试创建图像网格的HTML代码：

来源：https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

我想设置屏幕的图像显示中心，但是对齐项目或对齐 - 自我不要同时：

<div style="align-items: center;align-content: center;align-self: center;">
  <%foreach $datalist as $row%>
    <div class="row">
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
    </div>
  <%/foreach%>
</div>

结果：

为什么对齐项目中心不起作用？

如何显示屏幕中心？

Answer 1

content div经线div而不是经线.row{ display: flex; justify-content: center; align-items: center; }

align-items

或设置width

尝试{{1}}

Answer 2

这将有效：

<div>
    <%foreach $datalist as $row%>
    <div class="row" style="style="display: flex; justify-content: center; align-items: center;">
        <div class="column">
            <img src="shared/img/<%$row.image_name%>">
            <p><%$row.title%></p>
        </div>
        <div class="column">
            <img src="shared/img/<%$row.image_name%>">
            <p><%$row.title%></p>
        </div>
        <div class="column">
            <img src="shared/img/<%$row.image_name%>">
            <p><%$row.title%></p>
        </div>
        <div class="column">
            <img src="shared/img/<%$row.image_name%>">
            <p><%$row.title%></p>
        </div>
    </div>

    <%/foreach%>

</div>

Answer 3

请参阅MDN：

  

CSS align-items属性定义浏览器如何沿着容器的横轴在flex项之间和之间分配空间。

由于div不是display: flex，因此align-items属性不适用。