Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertically align multiple lines of text in a div [duplicate]

Tags:

html

css

I'm currently writing a RSS parser and I use Ractive to generate the view. I'm trying to vertically align the contents of .feed-text-offset according to the height of .feed-item.

How can I accomplish this?

Demo: https://jsfiddle.net/zzx5L4e9/

The output HTML is like this:

<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;
}
like image 820
Michael Avatar asked Dec 11 '16 13:12

Michael


1 Answers

Found my answer from https://stackoverflow.com/a/31078418/969894 and thanks @GCyrillus

I can apply the following to .feed-item and re-adjust the text offset to vertically align the contents of .feed-text-offset

display: flex;
align-items: center;
like image 174
Michael Avatar answered Nov 15 '22 01:11

Michael