在开发网页时,经常遇到需要将两个或多个div元素水平对齐的情况。下面,我们将介绍一种实现两个div同行水平对齐的方法。首先,我们需要将两个div元素包装在一个容器内。然后,为该容器设置display:
在开发网页时,经常遇到需要将两个或多个div元素水平对齐的情况。下面,我们将介绍一种实现两个div同行水平对齐的方法。
首先,我们需要将两个div元素包装在一个容器内。然后,为该容器设置display: flex;
属性,这将使得容器内的元素采用弹性布局。
<div class="container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> </div> .container { display: flex; }
接下来,我们需要对每个子元素设置flex-grow: 1;
和flex-basis: 0;
属性。这将使得两个子元素的宽度均分容器的可用宽度。
.box1, .box2 { flex-grow: 1; flex-basis: 0; }
最后需要指定子元素中较高的元素垂直居中。我们可以使用align-self: center;
属性来实现。
.box1 { align-self: center; }
完整代码如下:
<div class="container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> </div> .container { display: flex; } .box1, .box2 { flex-grow: 1; flex-basis: 0; } .box1 { align-self: center; }
上述方法可以确保两个div元素水平对齐,并且可以适应不同的屏幕尺寸。
粉丝
0
关注
0
收藏
0