简体   繁体   中英

middle vertical alignment of divs

I have one div which has three other inline divs. I would like to align these three divs vertically in middle. Spend hours trying to understand why vertical-align: middle; do no work and how to solve the problem. Any suggestion how to solve the problem?

example

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

Use these two property with your cells

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

JS Fiddle

Update: Without display:table-cell

Use vertical-align: middle; with your cells

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

JS Fiddle 2

I just came across this what is vertical align? with regard to your question why vertical-align: middle; do no work

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. 

You can also check this link if it is useful to solve your issue http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM