html - 使 div 在同一行居中

Question

我试图将这 3 个 float 的 div 置于同一行的中心。这是 jsfiddle 的链接:

https://jsfiddle.net/dtps4fw8/2/

有什么建议吗？

HTML:

<div class="content">

    <div class="box">

    </div>
    <div class="box">

    </div>
    <div class="box">

    </div>

</div>

CSS:

.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}

Answer 1

看这个fiddle

要使 3 个 div 居中，首先，删除 float 属性，然后应用 float 效果，使用 display:inline-block 。 inline-block 显示为 div 提供文本特征。父 div 的 text-align:center 会将这些 inline-block 元素置于父元素的中心。

如下更新您的 CSS

.box {
  width: 30%;
  height: 200px;
  display: inline-block;
  background: gray;
  border: black solid 2px;
  box-sizing: border;
  margin: 5px;
}

.content {
  text-align: center;
}