當容器高度未知時，居中垂直對齊元素

Question

我有兩列的行，一列包含圖像，另一列包含文本。 有沒有一種方法可以使我始終在列內垂直對齊文本，使其始終垂直居中？ 您可以在此處嘗試執行的第四行和第五行中看到一個示例：

http://machinas.com/wip/hugoboss/sensitive-img/

高度實際上取決於圖像的大小，因此我無法真正設置列的高度。

的HTML

<div class="row">
    <div class="large-6 column">
        <div class="txt-block">
            <h3>Lorem ipsum dolor</h3>         
            <p>Vivamus eget tempus magna. Proin dignissim, est ac mollis viverra, ligula leo fringilla dolor, in porttitor quam lectus eget augue. Etiam vel felis at mauris pellentesque cursus dignissim in nunc.</p>    
            <div class="center-wrap">
                <div class="center">
                    <a href="link" class="jetzt-entdeck">Jetzt entdecken</a>
                </div>
            </div>   
        </div>
    </div>
    <div class="large-6 column">
        <img src="http://placehold.it/470x400" alt="">
    </div>

的CSS

.column {
    display: table;
    float: left;
    height: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: relative;
}

Answer 1

您需要刪除大6列div上的浮點數，並在中間添加垂直對齊方式，還應將其顯示為表格單元而不是表格。 該行充當表格。 參見下面的css；

.large-6.column {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

Answer 2

如果不需要IE8支持，則可以使用CSS3 transform 。 在您的情況下，請top: 50% .txt-block top: 50%並添加transform: translateY(-50%); 什么將元素的高度的50％移到頂部。

JSFiddle演示

UPDATE另一個好的解決方案是設置div表的樣式而不是float樣式，並使用vertical-align: middle; 正如@Jay 在這里提到的。