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

Posted sallyshan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有几张高度不一样的小图片,如何用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;

 

以上是关于有几张高度不一样的小图片,如何用html+css实现在同一行垂直居中对齐?的主要内容,如果未能解决你的问题,请参考以下文章

如何用CSS使图片自适应显示宽度

如何用css显示一个图片中多个小图标?

如何用css动态控制footer的位置

如何用CSS样式表给商品图片贴上促销的小标贴?

如何用CSS让背景图能够撑满本身会滚动的页面?

html中如何用css实现隐藏部分div的效果,如下图所示: