在网页设计中,常常需要将两个层水平排列并居中。这时,我们可以利用CSS的flexbox布局来实现。以下是实现的具体方法。 /*将容器设置成flex*/ .container { display: fl
在网页设计中,常常需要将两个层水平排列并居中。这时,我们可以利用CSS的flexbox布局来实现。以下是实现的具体方法。
/*将容器设置成flex*/ .container { display: flex; justify-content: center; // 横向居中 align-items: center; // 纵向居中 } /*分别设置两个层*/ .box1 { width: 50%; height: 300px; background-color: #eee; } .box2 { width: 50%; height: 300px; background-color: #ddd; } /*HTML结构*/ <div class="container"> <div class="box1"></div> <div class="box2"></div> </div>
在上述代码中,我们设置了一个名为.container的容器,将其设置成flex,然后通过justify-content和align-items属性将其横向纵向居中。最后,我们利用.box1和.box2分别设置两个层,设定宽度、高度和背景颜色。HTML结构中,则按照.container、.box1、.box2的顺序排列。
粉丝
0
关注
0
收藏
0