[分享]css3怎么让图片底对齐

 在网页设计中，图片是非常重要的元素之一。但是有时候我们在排版时会碰到图片与文字的对齐问题，一些图片可能高度不一样，这让我们很难做到底部相对齐。那么，如何使用 CSS3 实现让图片底对齐呢？接下来介绍...

 在网页设计中，图片是非常重要的元素之一。但是有时候我们在排版时会碰到图片与文字的对齐问题，一些图片可能高度不一样，这让我们很难做到底部相对齐。那么，如何使用 CSS3 实现让图片底对齐呢？接下来介绍两种实现方法。
方法一：使用 display: flex
display: flex 属性是 CSS3 的一个比较常用的特性，可以让我们更方便地布局。要实现让图片底对齐，我们可以将图片容器设置为 flex 布局，然后将图片设为 flex 子元素，再通过 align-items: flex-end 实现底部对齐。
示例代码如下：

p {
  display: flex;
  align-items: flex-end;
}
img {
  width: 100px;
  height: 100px;
} 

上述代码可以实现将图片底部和文字的底部对齐。
方法二：使用 vertical-align: bottom
CSS3 还提供了一个 vertical-align 属性，可以实现垂直对齐。通过将图片的 vertical-align 属性设置为 bottom，就可以实现将图片底部与文字底部对齐。需要注意的是，这种方法仅适用于图片和文字在同一行的情况。
示例代码如下：

p {
  font-size: 24px;
  line-height: 1.5;
}
img {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
} 

上述代码可以实现将图片底部和同一行文字底部对齐。
总结
实现让图片底部对齐的方法有很多种，上述介绍了其中两种比较常用的方法。根据实际情况，选择合适的方法进行实现即可。希望对大家有所帮助！