我有两个要垂直对齐的内联块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设置为中，但这根本无法解决。
有人知道我在做什么错吗？
.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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句