html - 在不移动图像的情况下将文本放在图像下方？

Question

我有几张图片并排排列，这部分效果很好。但是，我想在每个图像下放置文本，但是当我尝试这样做时(通过使用“br”或创建自己的“div”)，图像创建了自己的行并将其他图像向下推。我明白为什么会这样，但我发现很难解决这个问题。这是我的代码:

<div class="container-team">
    <div class="team">
        <h2>Our team</h2>
        <div class="team-members">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
        </div>
    </div>
</div>

.container-team {
    background-color: #eee;
    display:block;
    overflow:auto;
    width: 100%;
}

.team {
    margin:0 auto; 
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.team h2 {
    color: #0E8DBD;
    padding-top: 40px;
    padding-left: 5%;
    padding-bottom: 100px;
    font-size: 32px;
    text-transform: uppercase;
}

.team-members {
    background: #eee;
    width: 100%;
    display:block;
    overflow:auto;
    margin: 0 auto;
    text-align: center;
}

.team-members img {
    width: 180px;
    height: 180px;
    margin: 20px;
}

这里还有 2 张图片，可以更清楚地说明正在发生的事情:

This is what it currently looks like

This is what happens when I give an image its own 'div'

感谢您的帮助，感谢您的宝贵时间。

Answer 1

div元素的显示属性默认为block。尝试这样的事情:

<div class="team-member">
  <img src="image.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.team-member {
  display: inline-block;
  width: 180px;
}

看看这个工作示例。希望这是您想要达到的结果:https://fiddle.jshell.net/ogocx9s5/