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％并将vertical-align设置为middle，但这根本不能解决。

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

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/

垂直对齐两个内联块元素

2 个答案: