The countdown text is refusing to remain centered within the border in Javascript

Question

The countdown text is refusing to remain centered within the border in Javascript

I am struggling to center text within a border. The text should be perfectly aligned in the middle of the border.

The text appears slightly to the right and the number slightly to the left

I was able to resolve this issue in Chrome, but it persists on CodePen, Safari, and Internet Explorer. Here is the CodePen link

Here is my HTML code:

// Set the date we're counting down to
  var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

  // Update the countdown timer every second
  var x = setInterval(function() {
    // Get today's date and time
    var now = new Date().getTime();

    // Calculate the distance between now and the count down date
    var distance = countDownDate - now;

    // Perform time calculations for days, hours, minutes, and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the countdown elements with appropriate styling
    document.getElementById("Countdown_Days").innerHTML =
      days + "<span>" + "<br>" + "Days" + "</span>";

    document.getElementById("Countdown_Hours").innerHTML =
      hours + "<span>" + "<br>" + "Hours" + "</span>";

    document.getElementById("Countdown_Minutes").innerHTML =
      minutes + "<span>" + "<br>" + "Minutes" + "</span>";

    document.getElementById("Countdown_Seconds").innerHTML =
      seconds + "<span>" + "<br>" + "Seconds" + "</span>";
  });

h2 {
        border: solid 1px #000;
        border-radius: 100%;
        display: inline-flex;
        padding: 30px 25px;
        font-size: 20px !important;
        color: #fff;
        font-weight: 600;
        line-height: 25px;
        height: 125px;
        width: 125px;
        margin: auto;
        text-align: center;
        margin-left: 5px;
      }

<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      </head>
      
      <div class="overlay">
        <div class="row marginnone">
          <div class="col-lg-7 col-md-12 center">
            <div class="countdown">
              <h1>Launch In</h1>
              <h2 id="Countdown_Days">58<span><br>Days</span></h2>
              <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
              <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
              <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
            </div>
          </div>
        </div>
      </div>

Any assistance would be greatly appreciated! Thank you!

javascript html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

I have made adjustments to the flex-direction of the H2 elements by replacing span and br elements with div elements. Did this achieve the desired outcome?

// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML = `<div>${days}</div><div>Days</div>`;

  document.getElementById("Countdown_Hours").innerHTML =`<div>${hours}</div><div>Hours</div>`;

  document.getElementById("Countdown_Minutes").innerHTML = `<div>${minutes}</div><div>Minutes</div>`;

  document.getElementById("Countdown_Seconds").innerHTML = `<div>${seconds}</div><div>Seconds</div>`;
});

h2 {
  align-items: center;
  border: solid 1px #000;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  margin-left: 5px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <div class="countdown">
        <h1>Launch In</h1>
        <h2 id="Countdown_Days">58<span><br>Days</span></h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
        <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
        <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
      </div>
    </div>
  </div>
</div>

Answer 2

I have made adjustments to the flex-direction of the H2 elements by replacing span and br elements with div elements. Did this achieve the desired outcome?

// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML = `<div>${days}</div><div>Days</div>`;

  document.getElementById("Countdown_Hours").innerHTML =`<div>${hours}</div><div>Hours</div>`;

  document.getElementById("Countdown_Minutes").innerHTML = `<div>${minutes}</div><div>Minutes</div>`;

  document.getElementById("Countdown_Seconds").innerHTML = `<div>${seconds}</div><div>Seconds</div>`;
});

h2 {
  align-items: center;
  border: solid 1px #000;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  margin-left: 5px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <div class="countdown">
        <h1>Launch In</h1>
        <h2 id="Countdown_Days">58<span><br>Days</span></h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
        <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
        <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Implement this customized CSS in place of your current CSS:

.countdown {
  display: flex;
}

h2{
  border: solid 1px #000;
  border-radius: 100%;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}

Your h1 element should be positioned above the countdown section

<div class="overlay">
  <div class="row marginnone">
   <div class="col-lg-7 col-md-12 center">
    <h1>Launch In</h1>
    <div class="countdown">
      <h2 id="Countdown_Days">58<span><br>Days</span></h2>
      <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
      <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
      <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
    </div>
   </div>
  </div>
 </div>

// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML =
    days + "<span>" + "<br>" + "Days" + "</span>";

  document.getElementById("Countdown_Hours").innerHTML =
    hours + "<span>" + "<br>" + "Hours" + "</span>";

  document.getElementById("Countdown_Minutes").innerHTML =
    minutes + "<span>" + "<br>" + "Minutes" + "</span>";

  document.getElementById("Countdown_Seconds").innerHTML =
    seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});

.countdown {
  display: flex;
}

h2{
  border: solid 1px #000;
  border-radius: 100%;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <h1>Launch In</h1>
      <div class="countdown">
        <h2 id="Countdown_Days">58<span><br>Days</span>           </h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span>           </h2>
        <h2 id="Countdown_Minutes">42<span>                           <br>Minutes</span>
        </h2>
        <h2 id="Countdown_Seconds">40<span>                        <br>Seconds</span>
        </h2>
      </div>
    </div>
  </div>
</div>

Answer 4

Implement this customized CSS in place of your current CSS:

.countdown {
  display: flex;
}

h2{
  border: solid 1px #000;
  border-radius: 100%;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}

Your h1 element should be positioned above the countdown section

<div class="overlay">
  <div class="row marginnone">
   <div class="col-lg-7 col-md-12 center">
    <h1>Launch In</h1>
    <div class="countdown">
      <h2 id="Countdown_Days">58<span><br>Days</span></h2>
      <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
      <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
      <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
    </div>
   </div>
  </div>
 </div>

// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML =
    days + "<span>" + "<br>" + "Days" + "</span>";

  document.getElementById("Countdown_Hours").innerHTML =
    hours + "<span>" + "<br>" + "Hours" + "</span>";

  document.getElementById("Countdown_Minutes").innerHTML =
    minutes + "<span>" + "<br>" + "Minutes" + "</span>";

  document.getElementById("Countdown_Seconds").innerHTML =
    seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});

.countdown {
  display: flex;
}

h2{
  border: solid 1px #000;
  border-radius: 100%;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <h1>Launch In</h1>
      <div class="countdown">
        <h2 id="Countdown_Days">58<span><br>Days</span>           </h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span>           </h2>
        <h2 id="Countdown_Minutes">42<span>                           <br>Minutes</span>
        </h2>
        <h2 id="Countdown_Seconds">40<span>                        <br>Seconds</span>
        </h2>
      </div>
    </div>
  </div>
</div>

The countdown text is refusing to remain centered within the border in Javascript

Answer №1

Answer №2

Similar questions

The test does not pass when attempting to use a shorthand operator to ascertain the truthfulness of

What is causing the inability for Angular to interpolate values now?

Efficiently populating a dataTable with data using ajax

Dealing with Unhandled Promise Rejections in Express.js

Creating a dazzling illuminated Icoshadron using Three.js

Applying absolute positioning to the router-outlet element in Angular2 using CSS

Having trouble locating the 'EJS' Typescript for the Express framework

What is the most effective way to declare a variable in TypeScript when assigning it within a class?

Creating a CSS button that spans multiple lines within a paragraph while maintaining the appearance of an anchor tag, even in

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

You cannot define headers once they have been sent to the client. If you encounter a NextJS redirect issue, consider using res

Using the data () method to define Chart.js annotations in Vue.js can cause them to malfunction

Receive a condensed version of several scripts

Use the Segoe UI typeface on Internet Explorer for a sleek

What is the best way to add a button to every row in Titanium Studio?

Using PHP (FPDF) to showcase pictures loaded from an HTML form into a PDF document

Dim the color of a date on the Sharepoint calendar

Why is it that my threshold for frustration in Bootstrap has been reached due to the ineffective grid system

Elements featured in the header: logo, tagline, graphics, and more

Updating Time by Adding Minutes using ngFor Loop in Angular 4