Question

I am currently working on a tabbed layout for one my site’s pages and im having a problem with aligning text vertically in different tabs since some of it spans one line and some spans two. I need to position the text in the middle of each tab, and not to have the text aligned by the first line.

I’ve tried Valign and Line-height so far but they are not very helpful.

Answer 1

You should use vertical-align: middle, but realize that in order for that to be applied you need to use display: table-cell.

For example, if you use something similar to this HTML structure:

<div class="container">
    <span>Some Text</span>
</div>

Then you could get the desired centering using:

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

Here is a JSFiddle example.

​