CSS 中两张图片并列垂直居中是一个常见的问题,以下是一些解决方案:/* 第一种方法: 使用 display: table-cell 和 vertical-align: middle */ .cont
CSS 中两张图片并列垂直居中是一个常见的问题,以下是一些解决方案:
/* 第一种方法: 使用 display: table-cell 和 vertical-align: middle */ .container { display: table; height: 300px; } .container img { display: table-cell; vertical-align: middle; width: 50%; } /* 第二种方法: 使用绝对定位和 transform */ .container { position: relative; } .container img { position: absolute; top: 50%; transform: translateY(-50%); width: 50%; }
两种方法的原理都是让两张图片所在的容器垂直居中,所以需要设置容器的高度和 display: table 或 position: relative。然后,通过 display: table-cell 或 position: absolute 让图片参与垂直居中的计算,再设置 vertical-align: middle 或 transform: translateY(-50%) 实现垂直居中。
粉丝
0
关注
0
收藏
0