CODEWITHSUNDEEP
htmlcss
Benjamin
Benjamin

Reputation: 2670

How to vertically align a image to the floated text

I am developing a two column responsive layout. Where one column has an image and the other do have the text. I want to align to the image vertical:middle; where I tried several techinques and stackoverflow answer till i could able to achieve it. Here is my code follows

HTML

<div class="row">
    <div class="col">
        <img src="http://placekitten.com/g/200/300">
    </div>
    <div class="col">
         <h2>Quicker answers to your customer’s questions.</h2>
         <p>Potential customers visit your site to learn more about what you do and how it can help them. When they have a question, our web chat tool gives them a direct line to your customer support and expert knowled</p>
    </div>
</div>

STYLE

h2{
    margin:0;
}
.col{
    float:left;
    width: 50%;
    vertical-align: middle;
}

DEMO

Can any one help to fix this. Thanks in advance.

Upvotes: 1

Views: 60

Answers (4)

enguerranws
enguerranws

Reputation: 8233

You have to use display: inline-block; property.

Live demo there : http://jsfiddle.net/y208tfc0/5/

h2{
    margin:0;
}
.row {
    display: inline-block;
}
.col{
    box-sizing: border-box;
    width: 45%;
    vertical-align: middle;
    display: inline-block;
}

Instead of putting .row {font-size: 0 } and breaking font-size rules, I choose to put .row display: inline-block.

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You can do the following:

h2{
    margin:0;
}
.col{
    width: 50%;
    vertical-align: middle;
    display: table-cell;/*Add display table-cell*/
}

.row{
    display: table;/*Add display table*/
}

fiddle

Upvotes: 0

Jay
Jay

Reputation: 792

You could display the row as table and col as table-cell?

css; 

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

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9303

You could try display: inline-block;

h2 {
    margin:0;
}

.col {
    display: inline-block;
    width: 50%;
    vertical-align: middle;
    font-size: 13px;
}

.row {
    font-size: 0; // remove space between inline-block elements
}

An example: http://jsfiddle.net/y208tfc0/1/

Upvotes: 2

Related Questions