CSS Valign different line spans of text

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.

​

Answer 2

If you need the text centered both vertically and horizontally, use:

text-align: center;
vertical-align: middle;

valign is an HTML attribute for td elements, so it probably won't work on your "tabs"

Answer 3

use line-height ex) line-height:20px

Answer 4

A really helpful read for this is understanding vertical align.

I'm assuming you're talking about the label on each tab selector here. You could use one of the tricks from that page, and center your tab text by putting it in an inner container .

Off the top of my head, have you tried:
line-height:100%; ? That might set the line height to the height of the parent, or it might fill the screen; not sure.