CODEWITHSUNDEEP
css
styler
styler

Reputation: 16501

Equal height columns and vertical align image in column?

Was wondering if anyone can show me best way to vertically align my image in image col and have the column equal in height to the text col?

CSS

*{padding:0;margin:0;}

.col{
    width: 50%;
    float: left;
    height: 100%;
}

.col-text {
    background: silver;
}

.col-img {
    background: red;
    display: inline-block;
    text-align: center;
}

.col-img img {
    display: inline-block;
    vertical-align: middle;
}

.cf:after{
        content:"";
        display:table;
        clear:both;
    }
}

JSFiddle http://jsfiddle.net/LUpmG/1/

Upvotes: 2

Views: 1342

Answers (1)

punund
punund

Reputation: 4421

This is my version: http://jsfiddle.net/LUpmG/2/

In short, you need to get rid of floats, use display: table-cell, and apply vertical-align: middle to the container.

Upvotes: 2

Related Questions