html - 为什么对齐元素中心不起作用？

Question

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

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

我想设置图像在屏幕中心显示，但 align-items 或 align-self 不会同时唤醒:

<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

首先对齐 warp div 的content 而不是warp div

.row{
  display: flex;
  justify-content: center;
  align-items: center;
}

或尝试使用 align-items 设置 width