Vertical-align

Пример: vertical-align: 60%, допустимые значения - процентные значения, а также ключевые слова sub, sup, top, middle, bottom.

Это свойство смещает шрифт вверх или вниз относительно основания строки. Наиболее распространенным применением является создание надстрочных и подстрочных символов, формул или математических выражений, вроде x4-y5

XHTML-теги sup и sub создают подстрочный и надстрочный текст автоматически, но для достижения лучшего результата предпочтительнее использовать сочетание vertical-align и text-size.

Вот код для данного примера:

<style type="text/css">
body {font-family:verdana, arial, sans-serif; font-size:100%;}
h4 {margin: 1.4em 20px .5em; color:#069;}
p {margin: 0 20px;}
p.largertext {font-size:2еm; margin-top: 1em;}
span.raised {font-size:. 4em; vertical-align:50%;}
p.custom sub {vertical-aliqn:sub; tont-size:65%;}
p.custom sup {vertical-align:65%; font-size:65%;}
p.customsmall {font-size:.8em;}
</style>
</head>
<body>
<p class="largertext">Vertical-align <span class="raised">can be used in all kinds of</span> interesting ways.</p>
<h4>This example uses default settings of the xhtml tags "sub" and "sup"</h4>
<p>Enjoy mountain spring !i<slb>2</sub>o - it's 10<sup>5</sup> times better than tap<sup>†</sup> water!</p>
<p><sup>†</sup><em>This means water provided through a municipal distribution system</em></p>
<h4>This example uses classes for custom vertical alignment and type sizes</h4>
<p class="custom">Enjoy mountain spring H<sub>2</sub>0 - it's 10<sup>5</sup> times better than tap<sup>†</sup> water!</p>
<p class="customsmall"><sup>†</sup><em>Tb_is means water provided through a municipal distribution system</em></p>
</body>