0

How can I align my text (consisting of a <h1> and a <h3>) that is inside a column taking up 7/12 of the width of the row in the vertical center? I want them to be left aligned but vertically in the center as there is an image in the other 5/12 of the row. Thanks if anyone knows!

Here 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>

And here 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;

On .details-texts and it does not work

Edit: adding d-flex and align-self-center classes works. Does anyone know how this is different from the display:flex method?

  • Use flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or as that looks like bootstrap you can use it's built in utility classes like "align-items-center" – justrusty Sep 21 '20 at 15:36
  • Does this answer your question? [Vertical Align Center in Bootstrap 4](https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4) – FluffyKitten Sep 21 '20 at 15:36

2 Answers2

1

You can use flexbox to do this.

.detail-texts{
    display: flex;
    align-items: center;
}
bpardo
  • 401
  • 5
  • 11
  • That's what I tried first too! But it doesn't work, I tried `align-self` instead of `align-items` too. I am reading some documentations now, will post when I find the answer –  Sep 21 '20 at 15:44
  • Check that styles are not being trodden with bootstrap ... in that case, you can use !Important – bpardo Sep 21 '20 at 15:45
0

Ok so found the solution: adding the class d-flex to my div with the row and adding align-self-center to the div class right inside it works. I am not sure how this is different from adding

display: flex;
align-self: center;

into SCSS because it's supposed to be the same thing so this is the only doubt I have thanks!