css - 如何在两个div中间垂直对齐文本

Question

我试图在 boxes div 的中间垂直对齐 + 符号，但是我无法让它工作。我究竟做错了什么？我也想避免使用表格。谢谢(我还附上了代码笔链接)

<div class="boxes">
   <div class="boxes_box">
   </div>
   <div class="boxes_plus">+</div>
   <div class="boxes_box">
   </div>
</div>

CSS

.boxes {
  height: 250px;
}
.boxes_box {
  width: 250px;
  height: 250px;
  display:inline-block;
  background:#000;
}
.boxes_plus {
  display:inline-block;
  height:250px;
  line-height:250px;
  vertical-align:middle;
}

http://codepen.io/anon/pen/aoiGm

Answer 1

使用这个:

.boxes {
  height: 250px;
  display:table;/*Add display table*/
}
.boxes_box {
  width: 250px;
  height: 250px;
  display:inline-block;
  background:#000;
  display:table-cell;/*display table cell here is not necessary*/
}
.boxes_plus {
  display:inline-block;
  height:250px;
  line-height:250px;
  vertical-align:middle;
  display:table-cell;/*Add display table cell*/
}

fiddle

或者你可以简单地删除 line-height:

.boxes_plus {
  display:inline-block;
  height:250px;
  /*line-height:250px;*/
  vertical-align:middle;
}

fiddle