1

他の 3 つのインライン div を持つ 1 つの div があります。これらの 3 つの div を中央に垂直に揃えたいと思います。vertical-align: middle; の理由を理解しようと何時間も費やしました。作業を行わず、問題を解決する方法。問題を解決する方法はありますか？

例

<div id="result-table">
            <div class="row-item">
                <div class="cell1">do not align vertically at middle</div>
                <div class="cell2">this one too</div>
                <div class="cell3">                    
                    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
            </div>
        </div>

#result-table {
    display: block;
}

.row-item {
    display: block;
    vertical-align: middle;
    width: 100%;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 5px;
}

.cell1 {
    display: inline-block;
    padding-left: 20px;
    width: 150px;
}

.cell2 {
    display: inline-block;
    width: 150px;
}

.cell3 {
    display: inline-block;
    width: 150px;
    padding-right: 20px;
}
4

2 に答える 2

3

これらの 2 つのプロパティをセルで使用する

.cell1 
{
    display: table-cell;
    vertical-align: middle;
    // other properties
}

JSフィドル

更新：なしdisplay:table-cell

vertical-align: middle;細胞で使用する

.cell2 {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
}

JS フィドル 2

于 2013-04-15T08:38:43.297 に答える