在网页设计过程中,经常会使用到CSS制作图片排版。例如我们要在两个图片上方加上文字说明,为了美观需要让这两个图片高度对齐。今天我们就来讲一讲如何使用CSS实现两个图片高度对齐。img{ vertica
在网页设计过程中,经常会使用到CSS制作图片排版。例如我们要在两个图片上方加上文字说明,为了美观需要让这两个图片高度对齐。今天我们就来讲一讲如何使用CSS实现两个图片高度对齐。
img{ vertical-align: middle; }
代码中,我们使用了vertical-align
属性来实现图片的垂直对齐。这是因为图片默认是基于baseline对齐的,而我们使用middle
属性可以让图片在中间对齐。
我们还可以在容器中设置对齐方式:
.container{ display: flex; align-items: center; }
代码中,我们使用了display: flex;
属性来设置容器为弹性布局,align-items: center;
则是让容器中的子元素垂直居中对齐。
总结一下,要让两个图片高度对齐,我们可以使用vertical-align: middle;
或者使用弹性布局来让容器中的子元素垂直居中对齐。
粉丝
0
关注
0
收藏
0