How to vertically align divs with different contents?

Question

I have two section on a page. I am not able to vertically align their contents. I am using vertical-align:middle yet unable to do it. I have also tried display:flex but that creates problem in responsive view.

Here is the structure:

<div class="container-fluid" style="display:table;width:100%;">
        <div class="row" style="display: table-cell;vertical-align:middle;">
            <div class="col-lg-9 section_1">
                <div class="logo hidden-xs">
                    <img src="custom_images/logo.png" />
                </div>
                <div class="realtor">
                    <img src="custom_images/realtors-profileimg.png" width="70" height="70" />
                </div>
                <div class="name & number">
                    <span>Sohil shah</span>
                    <span>+91-972-255-2874</span>
                </div>
                <div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
                <div class="phone_number hidden-xs">080-888-0888</div>
                <<div class="powered_by hidden-xs">
                    <img src="custom_images/powerdby-logo.png" />
                </div>
            </div>
            <div class="col-lg-3 section_2" style="height:70px;">
                <!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
                <div class="logo">
                    <img src="custom_images/logo.png" />
                </div>
                <div class="name & number">
                    <span>Sohil shah</span>
                    <span>+91-972-255-2874</span>
                </div>
            </div>
        </div>
    </div>

and the style is here....

.row > div
{
    display: table-cell;
    vertical-align: middle;
}

.section_1 > div
{
    display: inline-block;
}

.section_2 > div
{
    display: inline-block;
}

img
{
    max-width: 100%;
    max-height: 100%;
}

and here is the screen shot of the problem...

Possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Sleek Geek, Nov 03 '15 at 14:34

score 0 · Answer 1 · answered Nov 03 '15 at 14:46

You had error in HTML <<div class="powered_by hidden-xs">

Here is fixed version https://jsfiddle.net/kjp91hko/2/

<div class="container-fluid" style="display:table;width:100%;">
    <div class="row" style="display: table-cell;vertical-align:middle;">
        <div class="col-lg-9 section_1">
            <div class="logo hidden-xs">
                <img src="custom_images/logo.png" />
            </div>
            <div class="realtor">
                <img src="custom_images/realtors-profileimg.png" width="70" height="70" />
            </div>
            <div class="name & number">
                <span>Sohil shah</span>
                <span>+91-972-255-2874</span>
            </div>
            <div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
            <div class="phone_number hidden-xs">080-888-0888</div>
            <div class="powered_by hidden-xs">
                <img src="custom_images/powerdby-logo.png" />
            </div>
        </div>
        <div class="col-lg-3 section_2" style="height:70px;">
            <!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
            <div class="logo">
                <img src="custom_images/logo.png" />
            </div>
            <div class="name & number">
                <span>Sohil shah</span>
                <span>+91-972-255-2874</span>
            </div>
        </div>
    </div>
</div>

How to vertically align divs with different contents?

1 Answers1