[分享]CSS中如何将图片衬在文字下方

CSS中如何将图片衬在文字下方 在CSS中，我们可以使用`verticalalign`属性来调整图片的垂直对齐方式。默认情况下，图片是基于当前行的基线对齐的，也就是说，它在文本中的位置是跟文字的下方对...

CSS中如何将图片衬在文字下方
在CSS中，我们可以使用`vertical-align`属性来调整图片的垂直对齐方式。默认情况下，图片是基于当前行的基线对齐的，也就是说，它在文本中的位置是跟文字的下方对齐的。因此，如果我们想要将图片放在文字下方，我们可以指定图片的垂直对齐方式为`bottom`，这样它就会与当前行的底部对齐，从而实现我们想要的效果。
下面是一个示例代码，其中我们使用了一个`p`标签来包含一段文本，同时在文本下方添加了一个图片：

<style>
    .text-with-image {
        display: inline-block;
        position: relative;
        padding-bottom: 50px;
        /* 设置容器的高度和宽度，同时为图片留出一定的空间 */
    }
    .text-with-image img {
        position: absolute;
        bottom: 0;
        /* 将图片定位到容器的底部 */
        vertical-align: bottom;
        /* 调整图片的垂直对齐方式为bottom */
    }
</style>
<p class="text-with-image">
    这是一段文本，其中包含了一个图片：
    <img src="example.jpg" alt="示例图片">
</p> 

在上面的代码中，我们创建了一个类名为`text-with-image`的样式，它是一个内联块元素，用于包含文本和图片。我们向容器添加了一个`padding-bottom`属性，为图片留出了一定的空间。接着，我们为图片添加了一个样式，将其定位到容器的底部，同时调整了它的垂直对齐方式为`bottom`，以确保它紧贴着文本下方。
最后，我们在一个`p`标签中应用了这个样式，以展示我们的示例文本和图片。这样，当我们在浏览器中显示该页面时，就可以看到一个文本与图片紧密结合的效果，而且图片被放置在文字下方。