html - 无法使图像居中 div

Question

过去几个小时我一直在网站上工作，最近我使用 CSS3 Flexbox 添加了一个图像网格。但是，在过去的几个小时里，我一直无法将其居中。

我试过使用 justify-content: center 和 margin: 0 auto 来居中，但没有任何效果。

我做错了什么？

这是我的代码

HTML

<div class="gallery">
            <h3>Gallery</h3>
                <div class="tiles">
                    <div class="row">
                      <div class="column">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Mahatma-Gandhi%2C_studio%2C_1931.jpg">
                        <img src="https://www.biography.com/.image/t_share/MTYyNzM4ODIyODY0NDQ2NTA0/gandhi-spiritual-leader-leading-the-salt-march-in-protest-against-the-government-monopoly-on-salt-production-photo-by-central-pressgetty-images.jpg">
                      </div>
                      <div class="column">
                        <img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/201911/Mahatma_Gandhi-770x433.png?DtfYcyk4yzMDy1GNsIJaQgX7mrBoqTQO">
                        <img src="https://images.news18.com/ibnlive/uploads/2018/10/Mahatma-Gandhi2.jpg">
                      </div>
                      <div class="column">
                        <img src="https://images.livemint.com/img/2019/10/02/600x338/gandhi_1570037914879.JPG">
                        <img src="https://m.telegraphindia.com/unsafe/620x350/smart/static.telegraphindia.com/derivative/THE_TELEGRAPH/1671172/16X9/image34ba57f1-21d2-4af6-ad21-b9c036e39194.jpg">
                        <img src="https://img.etimg.com/thumb/msid-67754218,width-640,resizemode-4,imgsize-184267/he-whom-leaders-looked-up-to.jpg">
                      </div>
                    </div>
                </div>
        </div>

CSS

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.gallery {
    height: auto;
    width: 100%;
    text-align: center;
}

.gallery h3 {
    font-size: 60px;
    margin-bottom: 40px;
}

.tiles {
    display: block;
    width: 100%;
    margin: 0 auto;
}

如何让 tiles div 居中？

Answer 1

如果你想在屏幕中央显示 3 列，你必须:

• 将显示:flex； justify-content: center 在 .tiles 类
• 将列宽属性更改为 width: 33% 并移除 max-width: 25%
• 为您的 .row 类提供您想要的宽度或最大宽度，例如 max-width:75%