Question

我有一个div有三个其他的内联div。我想将这三个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;
}

Answer 1

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

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

JS Fiddle

更新：没有display:table-cell

对您的单元格使用vertical-align: middle;

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

JS Fiddle 2

Answer 2

我刚刚遇到了关于你的问题的what is vertical align? 为什么vertical-align：middle;不做任何工作

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

div的中间垂直对齐

2 个答案: