垂直对齐div中的多行文本

Question

我正在编写RSS解析器,我使用Ractive生成视图.我正在尝试根据.feed-item的高度垂直对齐.feed-text-offset的内容.

我怎么能做到这一点？

演示:https://jsfiddle.net/zzx5L4e9/

输出HTML是这样的:

<div class="feed-item">
    <div class="news-img-container">
        <img class="news-thumbnail" src="#" style="max-width: 125px;">
    </div>
    <div class="feed-text-offset">
        <a href="#" target="_blank">Text here</a>
        <span class="feed-item-since">1 hr</span></div>
        <div style="clear: both;">
    </div>
</div>

CSS

.feed-item {
    padding: 2px;
    background-color: green;
    float:left;
}

.feed-item-since {
    font-size: 0.8em;
    font-weight: 400;
    margin-top: 5px;
    display: block;
}

.news-img-container {
    width: 125px;
    float: left;
}

.feed-text-offset {
    margin-left: 130px;
}

Answer 1

从/sf/answers/2175489291/找到我的答案并感谢@GCyrillus

我可以将以下内容应用于.feed-item并重新调整文本偏移量以垂直对齐.feed-text-offset的内容

display: flex;
align-items: center;