[分享]css3图片底部对齐

CSS3是网页设计中常用的一种样式语言，它与HTML结合在一起使用，为网页带来了更加丰富的视觉效果。其中，图片底部对齐技术是CSS3中的一项重要技术之一。img { display: block; m...

CSS3是网页设计中常用的一种样式语言，它与HTML结合在一起使用，为网页带来了更加丰富的视觉效果。其中，图片底部对齐技术是CSS3中的一项重要技术之一。

img {
  display: block;
  margin: 0 auto;
  vertical-align: bottom;
} 

在CSS2中，图片通常是与其他文本内容一起居中对齐的，这会使得图片在垂直方向上的位置不是非常准确。但是，CSS3中提供了一个新的属性vertical-align，它可以使得图片在垂直方向上与其所在的容器底部对齐。

上述代码实现的效果是，将图片的display属性设置为block，以便让它们单独成行，然后设置margin为0 auto，以实现水平居中。最后，通过设置vertical-align属性为bottom，就可以实现图片底部与容器底部对齐的效果。

在实际使用中，我们可以结合其他的CSS属性，例如padding和border，来进一步调整图片的位置和样式，以达到更好的视觉效果。

总的来说，图片底部对齐技术是CSS3中非常有用的一项技术，可以为网页设计带来更加精准和美观的效果。