DEMO

Question

我正试图在+ div的中间垂直对齐boxes符号但是我无法使其正常工作。我究竟做错了什么？我也想避免使用表格。谢谢（我还附上了codepen链接）

<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

Answer 2

<style>
.boxes {
  height: 250px;
  display:table;
}
.boxes_box {
  width: 250px;
  height: 250px;
  display:table-cell;
  background:#000;
}
.boxes_plus {
  display:table-cell;
  height:250px;
  line-height:250px;
  vertical-align:middle;
}
</style>

Answer 3

对于与您所拥有的最小变化，请将.box_plus的{{1}}更改为vertical-align。

http://codepen.io/jwhitfieldseed/pen/FeJco

说明：top将“+”文字放在line-height的垂直中心。

文本已在其容器中垂直居中，因此您现在需要使.boxes_plus的顶部与.boxes_plus的顶部对齐。

Answer 4

请按以下步骤更新您的CSS

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

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

Answer 5

试试这个：

DEMO

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

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

5 个答案:

DEMO