воскресенье, 30 августа 2020 г.

Bootstrap 4 Vertical Center

  1. vertical centering within a parent container.
  2. or, vertical centering relative to adjacent elements.

1 — Vertical Center Using Auto Margins

One way to vertically center is to use my-auto. This will center the element within it’s flexbox container (The Bootstrap 4 .row is display:flex). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>

my-auto represents margins on the vertical y-axis, and is equivalent to:

margin-top: auto;
margin-bottom: auto;

DemoVertical Center Using Auto Margins


2 — Vertical Center with Flexbox

Since the Bootstrap 4 .row class is now display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:

<div class=”row”>
<div class=”col-6 align-self-center”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6">
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>

or, use align-items-center on the entire .row to vertically center align all col-* (columns) in the row…

<div class=”row align-items-center”>
<div class=”col-6”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6”>
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>

Demo Vertical Center Different Height Adjacent Columns


3 — Vertical Center Using Display Utils

Bootstrap 4 has now has display utils that are used a wrapper for the CSS display propery such asdisplay:block, display:inline, display:table-cell, display:none, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am groot
</div>
</div>
</div>

Demo — Vertical Center Using Display Utils



To following along with the latest Bootstrap 4 developments, examples and themes also check out my Bootstrap4.guide

Отблагодарить можно через форму справа "Donate" ... )

To reward you via the form on the right "Donate" ... )

:)

Комментариев нет :

Отправить комментарий

друзья )

Сохраняйте и делитесь желаниями, и не забывайте о важных датах! парсинг центр