在CSS中,你可以使用vertical-align
属性来让图片与文字底部对齐。这个属性用于设置元素的垂直对齐方式。
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
vertical-align: bottom;
}
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<p>
<img src="img_girl.jpg" alt="Girl in a jacket">
This is a paragraph with an image below it. The text and the image are aligned at the bottom of the parent element.
</p>
</body>
</html>
在这个示例中,我们首先将p
标签的display
属性设置为inline-block
,这样我们就可以使用vertical-align: bottom;
来将文本和图片都对齐到底部。然后,我们将img
标签的vertical-align
属性也设置为bottom;
,以确保图片也与文本底部对齐。