如何在兩個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>