html - 垂直对齐div中的多行文本

标签 html css

<分区>

我目前正在编写一个 RSS 解析器,我使用 Ractive 来生成 View 。我试图根据 .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;
}

最佳答案

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

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

display: flex;
align-items: center;

关于html - 垂直对齐div中的多行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41086743/

相关文章:

php - 如何在 PHP/HTML 中将 base64 字符串 (gif) 解码为图像

html - CSS 网格正方形布局

php - 引用另一个 HTML 文件中的元素 id

jquery - 如何在特定的 div 中显示固定的隐藏菜单?

css - 为什么在这种情况下 max-width 不起作用

javascript - 如何使用 jquery 切换 3 种背景颜色

javascript - 修复 SwipeRight - JQuery Mobile

html - 插入数据时表 <td> 高度增加

java - 使用 Jsoup 抓取网页

html - 水平对齐在 Firefox 和 IE 中不起作用