我的div的疯狂行为

Question

我有 3 div ，类为“ qcircle ”，我使用css定义它们以显示为3个圆圈。它们被赋予“ display：inline-block ;”这样我就可以让他们在一条线上消磨。   我想在这3个div中写一些东西，所以我使用了段落标记。 但是当我在第一个cirlce中做到这一点时，整个cirlce包括给定的内容下降，其他2个cirlces停留在他们的位置。 我不知道为什么会发生这种情况可以帮助我这个???? 这是我的HTML：

            <div class="qcircle">
                <p> THE FIRST ONE</p>
            </div>
            <div class="qcircle">

            </div>
            <div class="qcircle">

            </div>
            <div class="qcircle">

            </div>

这是我的css规则

.circles{
text-align: center;
}
.qcircle{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
.qcircle p{
color: blue;
font-size: 20px;
}

这是codepen链接 http://codepen.io/ShamZ/pen/WxRbKw

Answer 1

当您提供display: inline-block时，它会自动vertical-align自身baseline。设为top：

.circles{
  text-align: center;
}
.qcircle{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
  vertical-align: top;
}
.qcircle p{
  color: blue;
  font-size: 20px;
}

<div class="qcircle">
  <p> THE FIRST ONE</p>
</div>
<div class="qcircle">

</div>
<div class="qcircle">

</div>
<div class="qcircle">

</div>

预览

Answer 2

您只需在容器div上使用display: flex

即可

.circles{
  display: flex;
  align-items: center
}

.qcircle{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: black;
  margin-right: 4px
}

.qcircle p{
  color: blue;
  font-size: 20px
}

<div class="circles">
  <div class="qcircle">
    <p> THE FIRST ONE</p> 
  </div>
  <div class="qcircle">  

  </div>
  <div class="qcircle">

  </div>
  <div class="qcircle">

  </div>
</div>