竖直对齐两个内联块元素

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％，并将垂直对齐设置为中心，但这根本没有解决问题。

有人知道我在这里做错了什么吗？

- Steven

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
}

演示: http://jsfiddle.net/jedhep7x/1/

- Christina

---

完美无缺！ - Rahul Purohit

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

- Aru