css将两个元素水平对齐的方法(兼容IE8)

实现将两个元素水平对齐可以使用flex布局和float布局两种方法，其中float布局在兼容性方面比较好，可以兼容IE8及以上版本的浏览器。

实现将两个元素水平对齐可以使用flex布局和float布局两种方法，其中float布局在兼容性方面比较好，可以兼容IE8及以上版本的浏览器。

方法一：使用float布局

首先需要给需要对齐的元素设置浮动属性，再使用text-align属性设置其父元素的文本对齐方式为居中，这样就可以实现两个元素的水平居中对齐。

你可以参考下面的示例代码：

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

.wrapper {
  text-align: center;
}

.box1, .box2 {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  background-color: #ccc;
}

该示例中，box1和box2两个元素使用float布局，设置了相同的宽高和外边距，使其靠左对齐，并且父元素.wrapper设置了text-align:center，使两个元素居中对齐。

方法二：使用flex布局

flex布局可以更灵活地调整元素的对齐方式和排列顺序。需要使用display:flex和align-items:center等相关属性来实现。

你可以参考下面的示例代码：

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

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  margin: 0 10px;
  background-color: #ccc;
}

该示例中，box1和box2两个元素放置在一个flex容器内，容器设置了display:flex和justify-content:center以及align-items:center属性，使两个元素水平居中对齐。

这两种方法都可以实现将两个元素水平对齐的效果，并且在兼容性方面都比较好，可以根据具体需求选择合适的方法。