vertically center text without knowing if it will have 2 lines or one

Question

Any idea how I can vertically center text which can have one or two lines? More over, the text has it's line-height set. I've tried the following but it didn't work:

<div>
    <span>some text here</span>
</div>
<div>
    <span>some</span>
</div>

div {
    border: 1px solid;
    width: 70px;
    height: 50px;
    line-height: 50px;
}

span {
    display: inline-block;
    line-height: 14px;
}

this should help http://css-tricks.com/vertically-center-multi-lined-text/ — GibboK, Oct 18 '14 at 17:51

score 2 · Accepted Answer · answered Oct 18 '14 at 17:50

2

You can always use display: table-cell trick with vertical-align: middle:

div {
    border: 1px solid;
    width: 70px;
    height: 50px;
    display: table;
}
span {
    display: table-cell;
    vertical-align: middle;
}

<div> <span>some text here</span>

</div>
<div> <span>some</span>

</div>

answered Oct 18 '14 at 17:50

Alex Char

32,879
9
49
70

1

thanks, somehow it completely slipped off my mind) – Max Koretskyi Oct 18 '14 at 17:55

vertically center text without knowing if it will have 2 lines or one

1 Answers1