htmlcss

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?

#first {
  font-size: 200%;
}

#second {
  font-size: 100%;
}
<div id="parent">
  <span id="first">first</span>
  <span id="second">second</span>
</div>

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

Solution

  • You can use the vertical-align: middle property

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

    span {
  vertical-align: middle;
}

#first {
  font-size: 200%;
}

#second {
  font-size: 100%;
}
    <div id="parent">
  <span id="first">first</span>
  <span id="second">second</span>
</div>