How to center vertically a multiline div?

Question

I want to center vertically these lines. I tried the line-height method, but the lines don't adjusts on the holder .item.

I have this HTML:

<li><a href="#" class="item">
    <span>Line 1</span><br>
    <span>Line 2</span><br>
    <span>Line 3</span>
    </a>
</li>

And CSS:

.item {
    text-align: center;
    display: block;
    height: 125px;
    padding: 10px 0;
    border-radius: 2px;
    margin-bottom: 10px;
    color: #fff;
}

`vertical-align: text-bottom;` is going to be your saving grace here, as letters like p and q that hang below the `baseline` are going to throw off your apparent centering. So, align everything to the bottom, then add padding on top to match. This will drive off font size, so it will require some test and tweak. There's a bunch more things to try here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align and offset the top with padding. — BReal14, Sep 10 '14 at 14:11
Please review the dozens of questions on SO about this very topic, not to mention hundreds of discussions elsewhere on the web. — , Sep 10 '14 at 14:13

score 0 · Accepted Answer · answered Sep 10 '14 at 14:06

You could use the same padding on the top as on the bottom, that way the text within the element will be "centered" vertically. Like this:

.item {
    text-align: center;
    display: block;
    padding: 60px 0px;
    border-radius: 2px;
    margin-bottom: 10px;
    color: #fff;
}

An other method is using line-height, but that only works if there is a single line of text.

Also, check this out.

How to center vertically a multiline div?

1 Answers1