Question

我有两个div，它们已经在同一行，但它不在页面的中心。我试着这样做，但我不能。这是代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

检查flexbox

的当前浏览器兼容性表

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

.table-1 {
  overflow: hidden;
  margin: 0 auto;
text-align: center;
}
.table-1 > div{
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.box-1 {
  background: url(../images/_C008.jpg) no-repeat center center /cover;
  width: 32%;
  height: 300px;
border: 1px solid #ccc;
}
.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 3

这是我的解决方案的jsfiddle：

display: inline-block;
text-align: center;

Solution

在同一行中设置两个div以在中心显示

3 个答案: