in English
ვერტიკალური განლაგება
მარტივად შეცვალეთ ვერტიკალური გასწორება inline, inline-block, inline-table და ცხრილის უჯრედების ელემენტების.
შეცვალეთ ელემენტების გასწორება vertical-alignment
კომუნალურ მომსახურებებთან. გთხოვთ, გაითვალისწინოთ, რომ ვერტიკალური გასწორება გავლენას ახდენს მხოლოდ შიდა, ხაზოვანი ბლოკის, ცხრილის და ცხრილის უჯრედების ელემენტებზე.
აირჩიეთ .align-baseline
, .align-top
, .align-middle
, .align-bottom
, .align-text-bottom
და .align-text-top
საჭიროებისამებრ.
არა-შიდა კონტენტის ვერტიკალურად დასაცენტრებლად (როგორიცაა <div>
s და სხვა), გამოიყენეთ ჩვენი flex box უტილიტები .
ინლაინ ელემენტებით:
საბაზისო
ზედა
შუა
ქვედა
ტექსტი-ზედა
ტექსტი-ქვედა
<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>
სას
Utilities API
ვერტიკალური გასწორების კომუნალური პროგრამები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss
. ისწავლეთ როგორ გამოიყენოთ Utilities API.
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),