垂直對齊兩個內嵌塊元素

Question

我有兩個內嵌塊div元素，我想垂直對齊。它們都包含不同數量的文本，但較小的文本只在底部對齊。

這裏是我的HTML：

<div class="work-item"> 
    <div class="image-container"> 
     <p></p> 
    </div> 
    <div class="text-container"> 
     <p></p> 
    </div> 
</div> 

我的CSS：

.work-item { 
    width: 100%; 
    padding: 50px 0; 
} 

    .work-item .image-container, .work-item .text-container { 
     display: inline-block; 
    } 

    .work-item .image-container { 
     width: 33%; 
    } 

    .work-item .text-container { 
     width: 60%; 
    } 

    .work-item .text-container p { 
     margin: 0; 
    } 

你可以在這裏看到的jsfiddle：http://jsfiddle.net/jedhep7x/

我已經嘗試設置的div高度爲100％，將垂直對齊設置爲中間，但這根本不能解決問題。

任何人都知道我在這裏做錯了嗎？

Answer 1

.work-item { 
    width: 100%; 
    padding: 50px 0; 
} 
.work-item .image-container, 
.work-item .text-container { 
    display: inline-block; 
    vertical-align: middle; /* add me */ 
} 
.work-item .image-container { 
    width: 33% 
} 
.work-item .text-container { 
    width: 60% 
} 
.work-item .text-container p { 
    margin: 0 
} 

DEMO：http://jsfiddle.net/jedhep7x/1/

Answer 2

更新您的CSS與下面

的CSS：

.work-item { 
    width: 100%; 
    padding: 50px 0; 
    display:table; 
} 

    .work-item .image-container, .work-item .text-container { 
     display: table-cell; 
     vertical-align:middle; 
    } 

你可以看到這裏的jsfiddle：http://jsfiddle.net/jedhep7x/2/