In one of my Bootstrap 4 columns, I have an SVG:
<div class="col-lg-4 mx-auto ipad_right" style="text-align:center;">
I attempted to use the class:
.my-auto
on the svg element, but it remains at the top of the column.
Is there a way to vertically center the svg within the ipad screen (50% from top or parent div, 50% from bottom)?
In reference to the conversation in the comments above, a solution has been identified by utilizing
.class{
display: flex;
align-items: center;
justify-content: center
}
Explore this helpful demonstration on w3schools W3 Schools Link
Here is a simple way to achieve alignment using only native Bootstrap 4 classes, without the need for any custom CSS:
One important rule to remember: avoid nesting Bootstrap containers within each other!
To align your content, simply add the classes d-flex justify-content-center to the column and align-self-center to the anchor tag containing the spinner. Additionally, you can use the pb-4 class to push the spinner up slightly, ensuring better centering especially with background images like in your case.
Below is the code snippet:
<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>Keep in mind that adjustments may be needed for smaller screens.
Lastly, avoid inserting extensive SVG code directly into your examples in the future!
<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-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>Can styles be applied once an item wraps around? I have a two-column flexbox layout where the first item is fixed to the left and the second item should be centered in the remaining space. The solution mentioned here involves adding margin: auto to the se ...
I'm in a bit of a unique situation where I've created some VBA code that does find/replace operations on HTML special character codes. When I try to include this code on my website in HTML format, the parts where my code refers to characters lik ...
Currently, I am utilizing this particular example where I have a form embedded within the child rows. However, I have encountered an issue - the input from the child rows is not being submitted if the child rows are closed. Upon further examination, I noti ...
https://i.sstatic.net/cuQFc.gif Check out what I've created. I attempted to center a yellow div horizontally within an overflowing div, and trigger this using the scroll event. However, as you can see, it's glitchy and behaves oddly. The issue ...
I need to create a basic webpage where clicking a button will open the command prompt. This is my goal. Below are the HTML and Node.js code snippets. test.html <html> <head> </head> <body> <p>guru</p> <form a ...
Struggling with creating a card list design. I want to use MDB5 (utilizing Angular and the MDB5 package - ) but here's the concept: Imagine a white page where within a grey background, there is a list of item cards. Each card consists of an image on ...
I am attempting to position #header-supporter at the bottom right of #header-image, with overlapping elements. The challenge lies in setting a max-width of 1280px on #header-supporter-cont to maintain consistency with the site's margins. I have tried ...
Can you please help me figure out why the code below is not passing the list element ID to ajax correctly: Here's the HTML: <ul id="tree"> <li><a id="1">Finance</a></li> <li><a id="2">ACC& ...
Upon implementing "hover one DIV - affecting another inner DIV," a strange issue arose on iPad/iPhones where it now requires two taps to click on the link within the DIV with the hover effect: Below is the HTML code: <div class="portfblock"> &l ...
It seems like the task I have at hand may not be as simple as I had hoped, so here I am seeking some reassurance. I am aiming to switch out an image with a closing div, then the image itself, followed by another opening div. Let me illustrate this with a ...
I am learning React and experimenting with creating a basic static website using HTML templates in version ^18.2.0 of React JS. Everything seems to be functioning correctly, however, I have encountered an issue with page refresh. Specifically, when I repla ...
It seems like I have come across an issue with a CSS animation that I can't find a solution for. The animation is supposed to loop infinitely, and while it is working, there is a problem. // CSS @keyframes myanim { 0% { transform: translate(0, 0) ...
I recently encountered a problem similar to the one on this page within my App. Upon selecting the drop-down list, the corresponding menu opens as expected. However, when the user scrolls down the page, the drop-down menu remains in its original position. ...
Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...
I've been attempting to find information on this topic, but unfortunately my search has not been very successful. I vaguely recall coming across a tutorial that covered something like this. Does anyone happen to know how to alter the perspective of a ...
Looking for a solution to utilize @use instead of @import in order to import all variables from my _custom.scss partial into the styles.scss sass file. However, facing an issue where @use is not overriding the variables as expected. Any suggestions for res ...
Currently, I am in the process of creating an HTML catalog for movies, with plans to convert it into a PDF format. While using EO.Pdf initially showed promise with a small test sample, issues arose when attempting to run it against the entire list of movie ...
My goal is to create a nested structure where a div contains a span element like this: ---------- |Sentence| ---------- ----------------- |It's a looooong| |sentence | ----------------- While it works well for short sentences, long ones end u ...
For my project, I am looking to make a <div> with a height of 200px that contains text at both the top and bottom. My goal is for this design to be compatible with all popular web browsers. Despite experimenting with different combinations of align ...
Within my PartialView, I am looping through a Collection of Entities and displaying them in an Html Table. In one column of this table, there is an element with a font awesome class (fa fa-times-circle). I am setting the "id" property of this to the "I ...