Given a block of text, how to vertically center w one line. But grow to support 2 lines of text?

Please see this jsfiddle: http://jsfiddle.net/LGzdf/

What I want to do is some how vertically align the text to 50% if there is only 1 lines worth of text.

But if there is two lines, with just css, it should fill the entire space having a height equal to the image.

Ideas? Thanks

Answers


You may find this article useful.

Play around with something like this:

.mod-item {
    ...
    overflow:hidden;
}
.story {
    height:30px;
    display: table;
}
.mod-item .title {
    display: table-cell;
    vertical-align: middle; 
    height: 30px;
}

Demo


Need Your Help

GROK Parsing with regex

regex parsing grok

I am using the following regexes:

Changing a UITableViewCell using accessory view

iphone objective-c

Apparently I got stuck on the following: I have subclassed UITableViewCell to use my custom cell. That cell has one UIImage and two UILabels. Given I have 4 text fields to show, I can only show 2 a...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.