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>
Сасс
Утилитиес АПИ
Услужни програми за вертикално поравнање су декларисани у нашем АПИ-ју за услужне програме у scss/_utilities.scss
. Научите како да користите услужни АПИ.
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),