列中的等高柱和垂直对齐图像？

Question

想知道是否有人能告诉我在图像col中垂直对齐图像的最佳方法，并使列的高度与文本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/

Answer 1

这是我的版本：http://jsfiddle.net/LUpmG/2/

简而言之，您需要摆脱花车，使用display: table-cell，并将vertical-align: middle应用于容器。