如何在每个单独的img标签下放置标签

Question

[有人可以告诉我如何在每个单独的图像下放置文本，并且图像必须在同一行内工作时，我理解“ a”标记为阻塞而“ img”标记为内嵌显示的差异显示。这是我的代码：

HTML

 <div class="other-content">
        <div class="search">
            <h1>We Offer best experience in the world</h1>
            <img src="../Images/beach.jpg" alt="beach" width="200px" height="150px">
            <p>sadasdasd</p>
            <img src="../Images/desert.jpg" alt="desert" width="200px" height="150px">
            <p>sadasdasd</p>
            <img src="../Images/evergreen.jpg" alt="maoutin" width="200px" height="150px">
            <p>sadasdasd</p>
            <img src="../Images/snow-pathway.jpg" alt="snow-pathway" width="200px" height="150px">

        </div>
    </div>       

CSS

.other-content .search {
    background: #ffffff;
    height: 300px;
    text-align: center;
}

.other-content .search p{
    display: inline;
}

Answer 1

只需将带有文本的图片放在单独的div中，并减小div的宽度，直到文本在图片下方。并使用这些div分配display:inline-block;