in English
Вертикаль тигезләү
Эчке, блок-блок, сызык-өстәл һәм өстәл күзәнәк элементларының вертикаль тигезләнешен җиңел үзгәртегез.
vertical-alignment
Элементларның коммуналь хезмәтләр белән тигезләнешен үзгәртү . Зинһар, исегездә тотыгыз, вертикаль-тигезләү сызыкка, сызык-блокка, таблицага һәм өстәл күзәнәк элементларына гына кагыла.
Кирәк булганда .align-baseline
,,,, һәм сайлагыз . _.align-top
.align-middle
.align-bottom
.align-text-bottom
.align-text-top
Эчтә булмаган эчтәлекне вертикаль үзәкләштерү өчен ( <div>
лар һәм башкалар кебек), безнең флекс тартма ярдәмчесен кулланыгыз .
Эчтәлекле элементлар белән:
төп
өске
урта урта
текст-өске текст- аста
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Өстәл күзәнәкләре белән:
нигез | өстә | урта | аста | текст өсте | текст-аста |
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
Сасс
Коммуналь API
Вертикаль тигезләү коммуналь хезмәтләре безнең коммуналь APIда игълан ителә scss/_utilities.scss
. Коммуналь API кулланырга өйрәнегез.
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),