无法将图片的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列，则必须：

• 将display: flex; justify-content: center放入.tiles类中>
• 将列宽属性更改为width: 33%并删除max-width: 25%
• 给您的.row类所需的宽度或最大宽度，例如max-width:75%