I have been attempting to solve the challenge of vertically aligning content within my bootstrap grid.
Within my 3 col-md-4 columns, I am looking to center another div along with text inside each of them.
This is the current appearance:
https://i.sstatic.net/EP8ur.png
The desired look: https://i.sstatic.net/8MAqv.png
Simply everything centered.
I have explored various solutions, but none seemed to work effectively for me.
This is my HTML structure:
<div class="col-md-4 my-auto">
<div><p>TEST</p></div>
<p>This is an example</p>
</div>
<div class="col-md-4">
<div><p>TEST2</p></div>
<p>This is an example</p>
</div>
<div class="col-md-4">
<div><p>TEST3</p></div>
<p>This is an example</p>
</div>
</div>
Given my struggle with the CSS aspect, displaying it might not be necessary. However, here it is anyway:
I experimented with this code:
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
And also this one:
.vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%);
}
In addition to a few other codes, all without success.