In a column taking up 7/12 of the width of the row, how can I vertically center align text consisting of an <h1> and a <h3>? I want them to be left aligned while sharing the space with an image in the other 5/12 of the row. Any insights on this would be greatly appreciated!
Below is my HTML code:
<hr>
<div class="row detail">
<div class="col-md-7 detail-texts">
<h1 class="">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h1>
<h3 class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</h3>
</div>
<div class="col-md-5">
<img class="img-fluid mx-auto" src="assets/500x500.jpg" alt="grey box">
</div>
</div>
<hr>
<div class="row detail">
<div class="col-md-7 order-md-2 detail-texts">
<h1 class="">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h1>
<h3 class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</h3>
</div>
<div class="col-md-5 order-md-1">
<img class="img-fluid mx-auto" src="assets/500x500.jpg" alt="grey box">
</div>
</div>
<hr>
This is my SCSS file:
.detail{padding: 6%;
color:#5a5a5a;
&-texts{padding: 0;}
}
hr{width:88%;}
img{width: 500px;
height: 500px;}
display:flex;
align-items: center;
and
display:flex;
align-self: center;
I tried adding d-flex and align-self-center classes to .details-texts, which worked. Can anyone explain how this differs from using display:flex?