垂直对齐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

从https://stackoverflow.com/a/31078418/969894 找到我的答案并感谢@GCyrillus

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

display: flex;
align-items: center;