CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 974

How to align two different font-sizes next to each other?

How do I align two different-sized fonts next to each other so that the smaller text is centered vertically with the larger text?

HTML:

<div id="parent">
    <span id="first">first</span>
    <span id="second">second</span>
</div>

CSS:

#first {
    font-size: 200%;   
}

#second {
    font-size: 100%;
}

JSFiddle: http://jsfiddle.net/BmbWr/

Upvotes: 1

Views: 5584

Answers (4)

The Alpha
The Alpha

Reputation: 146191

This works fine

#first {
  font-size: 200%;

}

#second {
    font-size: 100%;
    vertical-align:top;
    line-height:38px;
}

Upvotes: 0

Michael Rader
Michael Rader

Reputation: 5957

You can do it like this:

http://jsfiddle.net/BmbWr/5/

I added one for further example.

Upvotes: -1

Lie Ryan
Lie Ryan

Reputation: 64847

Use line-height css property. Set both first and second with the same line height.

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

You can use the vertical-align: middle property

http://jsfiddle.net/BmbWr/1/

Upvotes: 3

Related Questions