How to vertically align SVG in Bootstrap 4 to row height?

Question

Link to codepen

I have an svg within a Bootstrap 4 column:

  <div class="col-lg-4 mx-auto ipad_right" style="text-align:center;">

I have tried adding the class:

.my-auto

to the svg element put the svg still sticks to the top of the column.

How can I vertically align the svg to sit within the ipad screen (50% from top or parent div, 50% from bottom)

Link to codepen

Answer 1

Re-iterating from the comment discussion above, but a solution has been found in using

.class{
display: flex;
align-items: center;
justify-content: center
}

Helpful w3 demo W3 Schools Link

Answer 2

Here's how to do it with native Bootstrap 4 classes alone without any custom css for alignment:

First of all, do NOT nest Bootstrap containers within other containers!

After cleaning up the code, just add the classes d-flex justify-content-center to the column and align-self-center to the a tag that holds the spinner. That's it!

To push the spinner up a bit, I also added the pb-4 class with adds padding bottom to make it more centered (since your background image isn't really centered visually because of the hands).

Here's the code:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <style> .ipad_right{ background: url("https://t00.deviantart.net/LVytvO1_H3UYV-jGPqj79iw4fPU=/300x200/filters:fixed_height(100,100):origin()/pre00/acd7/th/pre/f/2016/072/c/2/taking_photo_for_tablet_png_by_nayulipa-d9v0h5i.png"); background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; opacity: .97; background-repeat: no-repeat; background-position: bottom center; } .tt_button { -webkit-animation: rotation 1800ms infinite linear; -moz-animation: rotation 1800ms infinite linear; -o-animation: rotation 1800ms infinite linear; animation: rotation 1800ms infinite linear; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } </style> <div class="container"> <div class="row"> <div class="col-lg-10 mx-auto"> <h1 class="text-uppercase"> <strong>SVG SPINNER</strong> <hr class="light my-4"> <p class="text-faded mb-5">VERTICALLY ALIGNED</p> </h1> </div> </div> <div class="row" style="height:200px;"> <div class="col-lg-8 mx-auto my-auto">SUBSCRIBE</div> <div class="col-lg-4 ipad_right d-flex justify-content-center"> <a class="js-scroll-trigger align-self-center pb-4" href="#about"> <img src="https://picsum.photos/44/"> </a> </div> </div> </div> 

Note: You will need to adjust the code to work for smaller screens.

And:

Don't ever put such a giant chunk of SVG code into you code examples ever again!

Answer 3

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <style> .ipad_right{ background: url("https://t00.deviantart.net/LVytvO1_H3UYV-jGPqj79iw4fPU=/300x200/filters:fixed_height(100,100):origin()/pre00/acd7/th/pre/f/2016/072/c/2/taking_photo_for_tablet_png_by_nayulipa-d9v0h5i.png"); background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; opacity: .97; background-repeat: no-repeat; background-position: bottom center; } .tt_button { -webkit-animation: rotation 1800ms infinite linear; -moz-animation: rotation 1800ms infinite linear; -o-animation: rotation 1800ms infinite linear; animation: rotation 1800ms infinite linear; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } </style> <div class="container"> <div class="row"> <div class="col-lg-10 mx-auto"> <h1 class="text-uppercase"> <strong>SVG SPINNER</strong> <hr class="light my-4"> <p class="text-faded mb-5">VERTICALLY ALIGNED</p> </h1> </div> </div> <div class="row" style="height:200px;"> <div class="col-lg-8 mx-auto my-auto">SUBSCRIBE</div> <div class="col-lg-4 ipad_right d-flex justify-content-center"> <a class="js-scroll-trigger align-self-center pb-4" href="#about"> <img src="https://picsum.photos/44/"> </a> </div> </div> </div>