Menu
The desired display is to have the text in the left column vertically centered (middle). I have not been able to achieve that. This is because the picture in the right column is taller than the 2 paragraphs of text. Interestingly, the orange div is only as high as the paragraphs.
The inline styles are only there for debug. The design being used is responsive so I'm assuming setting a height in px will make it non-responsive.
Edit: The inline debug styles were misleading so have been removed
<div class="row">
<div class="col-md-8">
<div class="vertical-align-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
</div>
<div class="col-md-4">
<img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png">
</div>
</div>
917
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.
Add class . text-center to the parent div to align text or any item inside to the center. You can also decide how the alignment should look like on the specific screen sizes.
Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
In Bootstrap 4 and above, you can add the align-self-center class to the column div to vertically center it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8 align-self-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
<div class="col-4">
<img src="//lorempixel.com/150/300/" class="img-responsive" />
</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
