html - CSS 中的水平对齐

Question

我想将容器中的 box1,2,3 元素水平居中对齐，左右等距。我的 CSS 是

.row_2{
   margin: auto;
   width: 75%;
   height: 300px;
   text-align: justify;
   -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3{
    width: 30%;
    height: 250px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    padding: 25px;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.box1, .box3 {
    background: #ccc
}
.box2{
    background: #0ff
}

我的 HTML 是

<div class="row_2">
      <div class="col-sm-4 box1" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-sm-4 box2" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-sm-4 box3" style="background-color:lavender;">.col-sm-4</div>
    </div>

现在的问题是它们不在页面的中心。它们的左右距离不相等。

Answer 1

试试这个:-

.row_2 {
  display: block;
  margin: 0 auto;
  width: 75%;
  height: 300px; 
}

.box1, .box2, .box3 {
    width: 33.333%;
    height: 250px;
    vertical-align: top;
    display: inline-block;
    zoom: 1;
    /* padding: 25px; */ 
}

将 margin: 0 auto 添加到 row_2，调整宽度并移除 .box* 上的填充似乎可以解决您的问题。