Vertically align text in only one flex item in bootstrap

Question

I have a basic card, divided into 3 sections:

<div class="card" style="width: 350px; height: 250px;">
  <div class="card-body">
    <div class="d-flex flex-column" style="height: 100%;">
      <div class="p-2" style="height: 30%">1</div>
      <div class="p-2" style="height: 50%;">2</div>
      <div class="p-2" style="height: 20%;">3</div>
    </div>
  </div>
</div>

Now, I want to make sure the text is vertically aligned to the middle for the second section, without applying that to the other 2 sections. I was looking at align-items-center and align-self-center, but I'm struggling getting this right... Any help is much appreciated!

Update: fiddle is here.

Have you try this? [https://getbootstrap.com/docs/5.0/utilities/vertical-align/](https://getbootstrap.com/docs/5.0/utilities/vertical-align/) — Sfili_81, Oct 01 '21 at 15:01
Yeah, tried that one already, doesn't seem to work on flex items: https://jsfiddle.net/6cder4p3/ — binoculars, Oct 01 '21 at 15:05

Sfili_81 · Accepted Answer · 2021-10-01T15:07:59.770

You can use this class d-flex align-items-center into your second div p-2

.p-2{border:1px solid red;}

If you want also horizontal centering add also `justify-content-center`
Here is the [docs][1]

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 350px; height: 250px;">
  <div class="card-body">
    <div class="d-flex flex-column" style="height: 100%;">
      <div class="p-2" style="height: 30%">1</div>
      <div class="p-2 d-flex align-items-center" style="height: 50%;">2</div>
      <div class="p-2" style="height: 20%;">3</div>
    </div>
  </div>
</div>

Vertically align text in only one flex item in bootstrap

1 Answers1