为什么对齐项目中心不起作用? [英] Why align items center not working?

问题描述

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

来源:

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

如何显示到屏幕中央?

解决方案

首先alignwarp div的content而不是warp <代码>div

.row{显示:弹性；对齐内容:居中；对齐项目:居中；}

或尝试 align-items 设置 width

This is my HTML code attempt to create an image grid:

Source at: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

I want set image display center of screen but align-items or align-self not woking both:

<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>

Result:

Why align items center not working?

How can display to center of screen?

解决方案

First align the content of warp div and not the warp div

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

or try align-items with setting width

这篇关于为什么对齐项目中心不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！