[分享]css中怎么将两个盒子水平对齐

CSS是我们前端开发中不可或缺的一部分，它可以让我们轻松实现页面的样式设计。今天我来分享一下，如何将两个盒子水平对齐。首先我们来看一个简单的示例代码：html 我们希望box1和box2在同一行且...

CSS是我们前端开发中不可或缺的一部分，它可以让我们轻松实现页面的样式设计。今天我来分享一下，如何将两个盒子水平对齐。
首先我们来看一个简单的示例代码：

html
<div class="box1"></div>
<div class="box2"></div> 

我们希望box1和box2在同一行且水平对齐，那么我们可以像下面这样实现：

css
.box1, .box2 {
  display: inline-block;
  vertical-align: top;
} 

首先我们将box1和box2的display设置为inline-block，这样就可以让它们在同一行显示了。接着，我们还需要设置它们的vertical-align为top，这样它们就会水平对齐了。
另外，还有一种方法可以实现盒子的水平对齐，就是使用flex布局。代码如下：

css
.container {
  display: flex;
  justify-content: space-between;
}
.box1, .box2 {
  width: 100px;
  height: 100px;
} 

我们在一个容器中设置display为flex，然后再使用justify-content属性来设置盒子之间的间距。在box1和box2中，我们还需要设置宽高，这样它们就可以在同一行并水平对齐了。
总体来说，这两种方法都可以实现盒子的水平对齐，具体使用哪种方法还需要看具体情况。希望这篇文章可以帮助到大家。