jacktheripper
jacktheripper

Reputation: 14219

CSS vertical align different text size

Assuming the following HTML:

​<p><span style="font-size: 40px;">A</span>a​​​​​​​​​​​​​​​​​​​​​​</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Is it possible to get the second character to align to the center of the first?

Actual Result

The second character is aligned to the bottom of the first character in this example:

enter image description here

Expected Result

However, I want the second character to be aligned to the middle of the first character:

enter image description here

Upvotes: 8

Views: 9091

Answers (2)

Orbiting Eden
Orbiting Eden

Reputation: 1512

Add vertical-align:middle; to the <span> (example):

<p><span style="font-size: 40px;vertical-align: middle;">A</span>a</p>​​​​​​​​​​​​

Upvotes: 5

Nick Rolando
Nick Rolando

Reputation: 26167

Just add in the vertical-align:middle; style.

http://jsfiddle.net/uEu6B/1/

Upvotes: 14

Related Questions