middle vertical alignment of divs

Question

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

hi maybe this trend help you http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — jhunlio, Apr 15 '13 at 08:55
See this question http://stackoverflow.com/questions/15939896/css-inline-block-vs-table-cell You will find the answer — luxi, Apr 15 '13 at 09:11

Sachin · Accepted Answer · 2013-04-15T08:49:10.753

3

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

edited Apr 15 '13 at 08:49

answered Apr 15 '13 at 08:38

Sachin

40,216
7
90
102

table-cell introduce many other problems and want to solve teh problem without using table-cell. – Tomas Apr 15 '13 at 08:40
Also your example is not complete, you should set display:table and display:table-row on outer divs. – Tomas Apr 15 '13 at 08:42
@Tomas I have updated my answer without using `table-cell`, have a look and plz let me know if you are having any issue – Sachin Apr 15 '13 at 08:50
It do not work if outer div has height more than inner div, please look at example http://jsfiddle.net/tomasr/Vwuam/ – Tomas Apr 15 '13 at 08:55
Why are you specifying height of parent div. It will also cause a overflow if content of child div have more height than the parent div. btw you can take some help from here as well http://www.vanseodesign.com/css/vertical-centering/ – Sachin Apr 15 '13 at 09:01
@Sachin http://stackoverflow.com/questions/15939896/css-inline-block-vs-table-cell if you could vertically align to provided answer? of C-link – luxi Apr 15 '13 at 09:20

score 0 · Answer 2 · answered Apr 15 '13 at 08:59

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

middle vertical alignment of divs

2 Answers2