CSS中,如何让两个盒子上下对齐是一个常见的问题。以下是两种方法。方法一:使用flexbox.container{ display: flex; align-items: center; } .box
CSS中,如何让两个盒子上下对齐是一个常见的问题。以下是两种方法。
方法一:使用flexbox
.container{ display: flex; align-items: center; } .box1{ height: 100px; } .box2{ height: 80px; }
首先,将两个盒子包裹在一个容器中,对容器应用display:flex。然后应用align-items:center,使两个盒子在容器内上下居中对齐。
注意: 在使用flexbox的时候,需要注意浏览器兼容性问题,需要根据实际情况添加相应的前缀。
方法二:使用line-height
.container{ line-height: 100px; } .box1{ height: 100px; } .box2{ height: 80px; }
同样,将两个盒子包裹在一个容器中。然后在容器中设置一个合适的line-height值,使其与box1的高度相等。这样盒子2的内容将在盒子的垂直中心对齐。
无论使用哪种方法,都需要对两个盒子的高度进行考虑,保证布局的正确性。
粉丝
0
关注
0
收藏
0