1

我有一个具有其他三个内联 div 的 div。我想将这三个 div 垂直对齐在中间。花几个小时试图理解为什么垂直对齐：中间；不工作以及如何解决问题。任何建议如何解决这个问题？

例子

<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

将这两个属性与您的单元格一起使用

.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 回答
0

我刚刚遇到这个什么是垂直对齐？关于你的问题为什么垂直对齐：中间；不工作 

The confusion, in my opinion, sets in when people try to use vertical-align on 
block level elements and get no results. If you have a small div inside a larger
div and  want to vertically center the smaller one within, vertical-align will
not help you. Douglas Heriot has a good roundup of methods on 
In The Woods of ways to do this.

如果对解决您的问题有用，您还可以查看此链接http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

于 2013-04-15T08:59:26.787 回答