How can you vertically align multi-line text within a list?

Question

css:

ul { float: left; margin-right:20px; } ul li { height: 3em; border: 1px solid #ff0000; width:200px; }

html:

<ul> <li> Some text</li> <li>Some text<br />some more text</li> <li>some test text3</li> <li>even more text<br />and more</li> </ul> <ul> <li> Some text</li> <li>Some text<br />some more text</li> <li>some test text</li> <li>even more text<br />and more</li> </ul>

This is trivial with vertically aligning text and making the height equal to the line-height if you have one line only but any more than that, things look really screwy.

Community · Accepted Answer · 2017-05-23 12:30:32Z

You can do it with a helper :before element and by adding a nested <span>:

ul li span { display: inline-block; vertical-align: middle; } ul li:before{ content: ''; display: inline-block; vertical-align: middle; height: 100%; }

Here's a demo of it in action.

This works because two inline-block elements will vertically align with each other. The :before rule creates an inline-block element that is the same height as its parent, which the variable height <span> can vertically align with.

For a complete explanation of how it works, see this answer about vertically aligning images.

The li before eliminates the bullet beside the <li> point. I found it works better if I skip that selector, and use vertical-align:top in the ul li span selector.

Jason Gennaro · Accepted Answer · 2011-10-10 19:16:21Z

You can do this by adding a span to your markup and then using display:table etc in your css:

<ul> <li><span>Some text</span></li> <li><span>Some text<br />some more text</span></li> <li><span>some test text</span></li> <li><span>even more text<br />and more</span></li> </ul>

CSS

ul { display: table; border-collapse: collapse; width: 100%; } ul li { height: 3em; border: 1px solid #ff0000; display: table-row; } ul li span{ display:table-cell; vertical-align: middle; }

Example: http://jsfiddle.net/jasongennaro/nePt6/

This solution works very well also and is very intuitive. The only hiccup I had with this was it caused a couple of odd visual nuances when working in tandem with some additional CSS3 styling.

Collectives™ on Stack Overflow

How can you vertically align multi-line text within a list?

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related