Как выровнять два разных размера шрифта рядом друг с другом?

Question

Как выровнять два шрифта разного размера рядом друг с другом, чтобы меньший текст был центрирован по вертикали с большим текстом?

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/

Answer 1

Вы можете использовать vertical-align: middle свойство

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

Answer 2

Использовать свойство cc-line. Установите как первую, так и вторую с одинаковой высотой строки.

Answer 3

Вы можете сделать это следующим образом:

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

Я добавил один для другого примера.

Answer 4

Это прекрасно работает

#first { 
    font-size: 200%; 

}

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