有几张高度不一样的小图片,如何用html+css实现在同一行垂直居中对齐?

方法一 :使用弹性布局

 

 

 

方法二 :CSS3 transform 属性

父级元素定位

子集元素加属性:

position: absolute;
top: 50%;
transform: translateY(-50%);

方法三: 使用伪元素和vertical-align: middle;

.parent:after {
content: ' ';
height: 100%;
vertical-align: middle;
width: 0;
}
child {
display: inline-block;
vertical-align: middle;
}

 

posted @ 2019-09-25 23:37  shansally  阅读(1148)  评论(0编辑  收藏  举报