Remove the whitespace between the <h2> element and the CSS animation

Is there a way to remove the space between h2 and the animation in the following code snippet?

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

h2 {
  text-align: center;
}
<h2>xyzxyzxyzxyz.
  <div class="loader" style="float:right;"></div>
</h2>

Check out the JSFIDDLE link for reference: https://jsfiddle.net/wdzLv7tk/

cssbootstrap-4

Answer №1

Float:right was causing the issue, but there are multiple solutions to align elements side by side. One approach I took was using display:table for the parent element and display:table-cell for each child, which effectively resolved the problem.

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

.parent {
  display: table;
  margin:auto;
}

.child {
  display: table-cell;
}

h2 {}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

h2 {
  text-align: center;
}
<div class="parent">
  <h2 class="child">xyzxyzxyzxyz.</h2>
  <div class="loader child" style=""></div>
</div>

Answer №2

Instead of using text-align: center, try using text-align: right

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
h2 {
text-align: right;
}
<h2>xyzxyzxyzxyz.<div class="loader" style="float:right;"></div></h2>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when trying to integrate Bootstrap modal with bootcards

I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...

htmlcsstwitter-bootstrapmodal-dialogz-index

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this: <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros c ...

javascriptjqueryhtmlcss

Reposition DIV elements using only CSS styling

I'm attempting to switch the positions of two divs for responsive design (the website appearance changes based on browser width, ideal for mobile). Currently, my setup looks like this: <div id="first_div"></div> <div id="second_div"&g ...

cssresponsive-design

Alter the Header/Navigation to switch colors depending on the section of the website currently being viewed

I'm currently revamping my personal portfolio website and had an idea for a cool feature. I want the header/navigation bar to change color based on which section of the webpage it's in (the site is one page only). My initial thought was to add o ...

javascriptjqueryhtmlcss

How can I adjust the height and width of a checkbox input specifically for mobile screens?

Check out this code snippet: <div class="container-fluid mt-5"> <div class="row"> <div class="col-10"> Hello <br> Hello </div> <div class="col-2"> <input type="checkbox" class= ...

cssbootstrap-4

Spin the SVG image upon clicking the Bootstrap 4 collapse feature

I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked. While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font ic ...

twitter-bootstrapcssbootstrap-4css-transitions

Utilization of z-index with float: left within an image gallery in CSS

Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code: .item { width: 200px; margin: 10px; float: left; } To add some functionality, I have implemented ...

jqueryhtmlcsscss-floatz-index

Troubleshooting CSS loading issue on iPhone 5 Safari with Responsive Design

I am trying to figure out why my website (Link) is not displaying correctly with responsive design on iPhone5 Safari Browser, even though it works fine on desktop browsers like IE, Chrome, and Safari. It also displays correctly on HTC and Samsung Galaxy de ...

htmlcssresponsive-designmobile-safariiphone-5

Using Url.Action in ASP.NET MVC will result in the addition of a semicolon to the href URL

Snippet from my View getItems.cshtml <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> @{int index = 1;} @foreach (var o in ViewBag.CountryList) { <li><a class="dropdown-item&quo ...

c#asp.net-mvcbootstrap-4

Functionality of the copy button

I have a Bootstrap code snippet that I want to use to create an address and add copy button functionality: <div class="modal fade" id="bitcoinModal" role="dialog"> <div class="modal-dialog modal-lg"> & ...

javascripthtmlbootstrap-4bootstrap-modal

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

csshtmlcanvashtml5-canvas

Is there a way to ensure that a DIV element expands to the bottom of the page once scrolling has occurred?

Trying to create a webpage with a specific layout: Everything looks good, but if the content on the right goes off the page and requires scrolling, the left menu bar ("second_navbar") doesn't stretch to the end of the page. I've attempted chang ...

htmlcssnavbar

The Americanpurpose1 font family features playful smiley faces when special characters such as parentheses and hashtags are used

I have utilized the font family americanpurpose1 for my current project, however, I am encountering issues where special characters such as (), #, etc. are displaying as Smiley faces. I have attempted to use HTML symbol codes to resolve this problem, but u ...

htmlcssfont-family

Showcasing a pair of images adjacent to each other with adequate spacing using CSS

I'm having trouble displaying two images side by side on my website with a gap in between. I've used CSS to position the images next to each other. This is the HTML code I'm using: <div id="divCenter"> <img src="Company L ...

cssasp.nethtml

DIV size issue resolved

Content within a div is surpassing the set fixed size determined by CSS. <style> #fixeddiv { position: fixed; margin: auto; max-height: 300px; max-width: 700px; } </style> <div id="fixeddiv"> <div id="M77 ...

htmlcss

Is your website designed to adapt effortlessly to all screen sizes?

After uploading my web pages to a server, I've been testing them on various screen sizes and resolutions. Although everything looks good on larger screens, it's not scaling well on smaller resolutions like 800 x 600, 640 x 480, and 240 x 320. Cou ...

cssweb

Experiencing a hiccup in your jQuery animation?

Click here to access the fiddle demonstrating the issue. A situation arises where a span with display: inline-block houses another span that is being slowly hidden. The container span unexpectedly shifts back to its original position once the hiding proces ...

javascriptjquerycss

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

javascripthtmlcss