垂直对齐两个内嵌块元素

我有两个内嵌块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％，将垂直对齐设置为中间，但这根本不能解决问题。

任何人都知道我在这里做错了吗？

来源

2014-09-22 Steven

.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/

来源

2014-09-22 01:11:50 Christina

更新您的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/

来源

2014-09-23 10:39:42 Aru

垂直对齐两个内嵌块元素

回答

相关问题