使用＆＃34;显示：inline-block＆＃34;将行中的div对齐财产没有正确对齐

Question

我尝试将div与display: inline-block对齐。它工作正常，直到我在div中放置<input />。请查看codepen

以下是html的代码：

<div class="x"></div>

<div class="x">
  <input type="text">
</div>

<div class="x"></div>

对于css：

.x{
  display: inline-block;
  height: 250px;
  width: 250px;
  background: #eee;
  margin-right: 10px;
}

我已经知道了以正确方式对齐它们的解决方案。我想了解为什么在上述情况下会发生这种情况。

Answer 1

  

默认情况下vertical-align为baseline。

改变它：

.x {
    vertical-align: top;
    //other css...
}

＆＃13;

＆＃13;

.x {
  display: inline-block;
  height: 250px;
  width: 250px;
  background: #eee;
  margin-right: 10px;
  vertical-align: top;
}

＆＃13;

<div class="x"></div>

<div class="x">
  <input type="text" />
</div>

<div class="x"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.x{
  display: inline-block;
  height: 250px;
  width: 20%;
  background: #eee;
  margin-right: 10px;
  vertical-align:middle
}

<div class="x"></div>

<div class="x">
  <input type="text">
</div>

<div class="x"></div>

vertcal-align:middle;

添加它以垂直对齐你的div