html - 设置同一行的两个div居中显示

Question

我有两个 div，它们已经在同一行，但不在页面中央。我试着去做，但我做不到。这是代码:

.table-1 {
  overflow: hidden;
  margin: 0 auto;
}
.box-1 {
  background: url(../images/_C008.jpg) no-repeat center center /cover;
  width: 32%;
  height: 300px;
  float: left;
}
.box-2 {
  background: #374140;
  width: 32%;
  height: 300px;
  overflow: hidden;
}

<div class="table-1">
  <div class="box-1">
  </div>
  <div class="box-2">
    <p>Au quotidien, la vie de l’atelier est organisée autour des tâches minutieuses de chacun et tous sont conscients que l’excellence est le résultat d’un travail d’équipe.</p>
  </div>
</div>

Answer 1

使用灵活的盒子解决方案。将 display: flex 设置为两个框的父元素，然后使用 justify-content: center 将它们居中对齐。

检查当前浏览器兼容性表 flexbox

.table-1 {
  display: flex;
  justify-content: center;
}
.box-1 {
  background: url(../images/_C008.jpg) no-repeat center center /cover;
  width: 32%;
  height: 300px;
  float: left;
}
.box-2 {
  background: #374140;
  width: 32%;
  height: 300px;
  overflow: hidden;
}

<div class="table-1">
  <div class="box-1">
    <p>Au quotidien, la vie de l’atelier est organisée autour des tâches minutieuses de chacun et tous sont conscients que l’excellence est le résultat d’un travail d’équipe.</p>
  </div>
  <div class="box-2">
    <p>Au quotidien, la vie de l’atelier est organisée autour des tâches minutieuses de chacun et tous sont conscients que l’excellence est le résultat d’un travail d’équipe.</p>
  </div>
</div>