| |
|
|
| |
<style>
.beg {
background-color: yellow;
height: 32px;
width: 54px;
display: inline-block;
}
.middle {
background-color: blue;
text-align: center;
padding-right : 10px;
padding-left : 10px;
color : white;
font-weight : bold;
height : 32px;
display: inline-block;
vertical-align: top;
}
.end {
background-color: yellow;
height: 32px;
width: 7px;
display: inline-block;
}
</style>
<div style="padding: 50px;">
<span style="height: 32px;">
<span class="beg"></span><span class="middle">text text</span><span class="end"></span>
</span>
</div>
|
Как выровнить текст?
Спасибо. | |
| |
|
|
| |
|
|
| |
для: Oxy
(25.11.2009 в 00:04)
| | | Если использовать свойство vertical-align, то - никак.
Свойство vertical-align работает совершенно не так, как, например, работает атрибут valign у ячейки.
При использовании атрибута valign выравнивание содержимого происходит относительно верхней и нижней границ ячейки.
А при использовании свойства vertical-align выравнивание происходит относительно положения текста в родительском элементе. Верхняя и нижняя границы SPAN'a тут совершенно не учитываются.
Пример для усвоения:
<style>
td {font-size: 12pt; color: black}
span {font-size: 8pt; color: green; background-color: silver; height: 16pt}
</style>
<table cellpadding="5" cellspacing="0" border="1">
<tr style="height: 100px">
<td valign="top">TOP<span style="vertical-align: baseline" >baseline</span></td>
<td valign="top">TOP<span style="vertical-align: top" >top</span></td>
<td valign="top">TOP<span style="vertical-align: middle" >middle</span></td>
<td valign="top">TOP<span style="vertical-align: bottom" >bottom</span></td>
<td valign="top">TOP<span style="vertical-align: super" >super</span></td>
<td valign="top">TOP<span style="vertical-align: sub" >sub</span></td>
<td valign="top">TOP<span style="vertical-align: text-top" >text-top</span></td>
<td valign="top">TOP<span style="vertical-align: text-bottom">text-bottom</span></td>
</tr>
<tr style="height: 100px">
<td>MIDDLE<span style="vertical-align: baseline" >baseline</span></td>
<td>MIDDLE<span style="vertical-align: top" >top</span></td>
<td>MIDDLE<span style="vertical-align: middle" >middle</span></td>
<td>MIDDLE<span style="vertical-align: bottom" >bottom</span></td>
<td>MIDDLE<span style="vertical-align: super" >super</span></td>
<td>MIDDLE<span style="vertical-align: sub" >sub</span></td>
<td>MIDDLE<span style="vertical-align: text-top" >text-top</span></td>
<td>MIDDLE<span style="vertical-align: text-bottom">text-bottom</span></td>
</tr>
<tr style="height: 100px">
<td valign="bottom">BOTTOM<span style="vertical-align: baseline" >baseline</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: top" >top</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: middle" >middle</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: bottom" >bottom</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: super" >super</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: sub" >sub</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: text-top" >text-top</span></td>
<td valign="bottom">BOTTOM<span style="vertical-align: text-bottom">text-bottom</span></td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: Oxy
(25.11.2009 в 00:04)
| | | можно задать высоту строки, в некоторых случаях помогает:
| |
| |
|
|
