码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-26 00:48:43      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:idt   orm   图片   弹性   ddl   splay   使用   css   lock   

方法一 :使用弹性布局

技术图片

 

 

 

方法二 :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;
}

 

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

标签:idt   orm   图片   弹性   ddl   splay   使用   css   lock   

原文地址:https://www.cnblogs.com/SallyShan/p/11588386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!