Align text vertically in a span

Question

I want "text 2" to be aligned vertically center to a text before it (i.e. "text 1" here).

HTML code:

<span style='font-size:22px'>text 1</span><span class='two'>text 2</span>

CSS code:

.two{
    color:red;
    font-size: 12px;
}

I thought vertical-align:middle for the .two class but it doesn't seem to work..

Here is the fiddle

Answer 1

You might need to apply vertical-align to both <span>.

span { vertical-align: middle }

http://jsfiddle.net/BBh4e/2/

Answer 2

Create a container for your text content, a span perhaps, and do the following:

span {
    display:inline-block;
    vertical-align:middle;
}