如何在每个单独的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;