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/
You can use the
vertical-align: middlepropertyhttp://jsfiddle.net/BmbWr/1/