How to vertically center dynamically 1 or 2 lines of text with CSS?

Question

Please note the attached image/wireframe. How can I build this element with CSS. Where if there is one line of text it is vertically centered but also support 2 lines also being vertically centered?

enter image description here

Treating your divs as table cells is the best way to do this. Take a look at this article: http://css-tricks.com/vertically-center-multi-lined-text/ — APAD1, Sep 05 '14 at 16:50

score 4 · Accepted Answer · answered Sep 05 '14 at 16:57

You can accomplish this by making your wrapper div display:table: and your inner text div display:table-cell. See example below:

HTML:

<div class="wrapper">
    <div class="inner">
        One Line</br>
        Two Line</br>
        Three Line</br>
    </div>
</div>

CSS:

.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}

.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}

FIDDLE: http://jsfiddle.net/pgwL47oy/1/

score 2 · Answer 2 · answered Sep 05 '14 at 16:58

This is already mentioned in a comment on your question, but usually the usage of display: table-cell; with vertical-align: middle; is what you're after.

The idea is to get the parent container to be displayed as a table with display: table;, and then the span or paragraph element you're using to contain those text nodes is given the above table-cell display with vertical-align.

It's worked for me before, should be worth a shot!

Here's a CSS Tricks article that could help you out further

Hope that helps! :)

How to vertically center dynamically 1 or 2 lines of text with CSS?

2 Answers2