Menu
Trying to vertically align the text center in the following card:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row text-center h-100">
<div class="col-md-3 text-center my-auto">
<div class="card card-block justify-content-center" style="height: 120px">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>I am fully aware of the many similar questions here, however I tried various solutions and none of them seems to work for my cards.
I tried "my-auto" on parent, card, and card-body. I tried "d-flex align-items-center h-100" and "justify-content-center". Also tried to play around with the display property. What am I missing?
317
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.
Since Bootstrap 4 . row is now display:flex you can simply use align-self-center on any column to vertically center it... or, use align-items-center on the entire .
To vertically align items, Bootstrap 4 provides different techniques, such as: Vertical Align utilities for changing the vertical alignment of inline, inline-block, inline-table, and table cell elements combined with Display utilities
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. my-auto represents margins on the vertical y-axis, and is equivalent to:
To make the text aligned center, use the .text-center class. In the following example, this class is applied in a paragraph and h1 to h6 headings to make text aligned centered: For aligning text right, use the .text-right class in the element.
Much love to bootstrap! You can use Flexbox here. Just add .d-flex and .justify-content-center and it'll be centered. Sorry, something went wrong.
Here is a solution using bootstrap 4 documentation for flexbox. Read more here
What you need to know,
d-flex -> makes the element a flexbox.
align-items-center - vertically aligns the content.
justify-content-center - horizontally aligns the content.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row text-center h-100">
<div class="col-md-3 text-center my-auto">
<div class="card card-block d-flex" style="height: 120px">
<div class="card-body align-items-center d-flex justify-content-center">
This is some text within a card body.
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
