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

Question

想知道是否有人可以告诉我在图像列中垂直对齐我的图像并使列的高度与文本列的高度相等的最佳方法？

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/

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