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

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

Solution 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

Solution 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!

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

Solution 1:

Solution 2:

Related

Recent Posts