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

Question

我想在boxes div中间垂直对齐+符号，但是我无法使它工作。我究竟做错了什么？我也想避免使用表格。谢谢（我还附上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

对于来自你有什么变化最小，改变.box_plus的vertical-align到top。

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

说明：line-height放入的.boxes_plus垂直中心的 “+” 文本。

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

Answer 2

使用本：

.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 3

请更新你的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 4

试试这个：

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; 
} 

Answer 5

<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>