CSS中实现元素的水平对齐非常简单,可以通过使用 display: flex 属性和 align-items: center 属性实现。.container { display: flex; alig
CSS中实现元素的水平对齐非常简单,可以通过使用"display: flex"属性和"align-items: center"属性实现。
.container { display: flex; align-items: center; } .item1 { margin-right: 10px; } .item2 {}
在上述示例中,我们创建了一个名为container的类作为元素的容器,接着,我们为container类添加了"display: flex"属性,这样container里面的子元素就会在同一行上对齐,而不是垂直排列。
同时,我们为container添加了"align-items: center"属性,这个属性可以将所包含的所有子元素垂直方向上居中对齐。
最后,我们给两个子元素添加了margin属性来实现水平间隔。
<div class="container"> <div class="item1">这是元素1</div> <div class="item2">这是元素2</div> </div>
上述代码就实现了两个元素的水平对齐,可以根据需要添加其他样式。
粉丝
0
关注
0
收藏
0