CSS中让两张图片垂直居中显示可能是网页设计中经常会遇到的问题。下面介绍两种方法实现这个效果。 .container { display: flex; align-items: center; jus
CSS中让两张图片垂直居中显示可能是网页设计中经常会遇到的问题。下面介绍两种方法实现这个效果。
.container { display: flex; align-items: center; justify-content: center; } .container img { margin: auto; }
使用flexbox布局,将容器设置为flex,然后设置align-items和justify-content属性为center。img元素设置margin属性为auto即可实现。
.container { position: relative; } .container img { position: absolute; top: 50%; transform: translateY(-50%); }
使用绝对定位,将容器设置为相对定位,img元素设置为绝对定位,并将top属性设置为50%。然后使用transform属性中的translateY函数将图片向上移动自身高度的一半。
这两种方法均可实现让两张图片垂直居中显示的效果。需要根据实际情况选择方法,以及配合其他样式进行调整。
粉丝
0
关注
0
收藏
0