Center text on top of another text

Question

So, I'm making a countdown, and the Javascript works fine. But because the number of digits changes when it counts down, it uncenters itself. I tried using JS to make it so when he number of digits changes, it changes the position. This failed. I'm using absolute positioning, as I'm not advanced enough to position it properly.

Is there anyway to align the text to the center of another element.

Here's my HTML code:

let days=document.getElementById("days");
let hours=document.getElementById("hours");
let minutes=document.getElementById("minutes");
let seconds=document.getElementById("seconds");

function timeDiffCalc(dateFuture, dateNow) {
    arr=[];
    let diffInMilliSeconds = Math.abs(dateFuture - dateNow) / 1000;
    // calculate days
    const days = Math.floor(diffInMilliSeconds / 86400);
    diffInMilliSeconds -= days * 86400;
    // calculate hours
    const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
    diffInMilliSeconds -= hours * 3600;
    // calculate minutes
    const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
    diffInMilliSeconds -= minutes * 60;
    arr.push(days,hours,minutes,diffInMilliSeconds.toFixed(0))
    return arr;
}

function center(){
 if (hours.textContent.length>1){
   hours.style.marginLeft="128px"
 }
 if (minutes.textContent.length>1){
   minutes.style.left="223px"
 }
 if (seconds.textContent.length>1){
   seconds.style.left="343px"
 }

}

function changeTime(){
 var time=timeDiffCalc(new Date('2022/1/1 0:0:0'), new Date())
 days.textContent=time[0]
 hours.textContent=time[1]
 minutes.textContent=time[2]
 seconds.textContent=time[3]
 center()
}


center()
setInterval(function(){changeTime()},1000)

@import url(https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,900);
body{
  background-image: url("happy-new-year-2021_10.jpg");
  backdrop-filter: blur(7px);
  color:black;
}

#hours{
  margin-left:138px;
  font-size:60px;
  font-weight:150;
}

#minutes{
  left: 235px;
  position: absolute;
  font-size:60px;
  font-weight:150;
}

#seconds{
  left: 355px;
  position: absolute;
  font-size:60px;
  font-weight:150;
}


#days{
  font-size:100px;
  font-weight:350;
  margin-left:200px;
  margin-bottom:2px;
  margin-top:60px;
}

h1{
 font-family: roboto;
 font-size:70px;
 margin-bottom: 2px;
 margin-top:2px;
 margin-left:25px;
 font-weight:400;
}
span{
  font-family: roboto;
  margin-left:30px;
}
p{
  font-family: roboto;
  margin-left:30px;
}


#date{
  font-weight:lighter;
  font-size: 14px;
  margin-left:30px;
}
#label{
  margin-top:50px;
  margin-bottom:2px;
  margin-left:30px;
  
}

.day-label{
  font-weight:40;
  font-size:25px;
  margin-left:255px;
  margin-top:2px;
}

.hour-label{
  left:93px;
  bottom:-40px;
  font-weight:lighter;
  position: absolute;
  margin-right:0px;
  font-family: roboto;
  max-width:0px;
  margin-left:45px;
  margin-top:15px;
  margin-bottom:20px;
}

.minute-label{
  font-weight:lighter;
  left:210px;
  bottom:-40px;
  position: absolute;
  margin-right:0px;
  font-family: roboto;
  max-width:0px;
  margin-left:45px;
  margin-top:15px;
  margin-bottom:20px;
}
.second-label{
  font-weight:lighter;
  left:327px;
  bottom:-40px;
  position: absolute;
  margin-right:0px;
  font-family: roboto;
  max-width:0px;
  margin-left:45px;
  margin-top:15px;
  margin-bottom:20px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p id="label">How many days until</p>
    <h1>New Year's Day</h1>
    <p id="date">Saturday, 1 January 2022</p>
    
    <p id="days">days</p>
    <p class="day-label">days</p>
    
    <span id="hours">21</span>
    <span class="hour-label">hours</span>
    
    <span id="minutes">2</span>
    <span class="minute-label">minutes</span>

    <span id="seconds">21</span>
    <span class="second-label">seconds</span>

    <script src="script.js"></script>
  </body>
</html>

Thanks in advance for your help!

I know, but the JS code doesn't affect the centering. If you need it, then I'll post it. — , Jan 05 '21 at 16:16

score 0 · Answer 1 · answered Jan 05 '21 at 16:38

So there 2 ways to do it. The simple fix is to make the countdown have 0s: 01:02:27. This way the width of the text stays the same.

The other way to do it is to position the elements properly using display: flex;. I suggest you read this article for more information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

John · Accepted Answer · 2021-01-05T16:49:51.210

You have a ton of code you don't need. The easiest way to do this is to wrap the days, hours, and minutes into a .container then text-align:center; the container.

I've also added a wrapper containing everything and applied this:

.wrapper {
  text-align: center;
}

Which will center everything on the page as well.

I did my best to clean up your code but check it out, everything is centered even when the numbers change.

let days=document.getElementById("days");
let hours=document.getElementById("hours");
let minutes=document.getElementById("minutes");
let seconds=document.getElementById("seconds");

function timeDiffCalc(dateFuture, dateNow) {
    arr=[];
    let diffInMilliSeconds = Math.abs(dateFuture - dateNow) / 1000;
    // calculate days
    const days = Math.floor(diffInMilliSeconds / 86400);
    diffInMilliSeconds -= days * 86400;
    // calculate hours
    const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
    diffInMilliSeconds -= hours * 3600;
    // calculate minutes
    const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
    diffInMilliSeconds -= minutes * 60;
    arr.push(days,hours,minutes,diffInMilliSeconds.toFixed(0))
    return arr;
}



function changeTime(){
 var time=timeDiffCalc(new Date('2022/1/1 0:0:0'), new Date())
 days.textContent=time[0]
 hours.textContent=time[1]
 minutes.textContent=time[2]
 seconds.textContent=time[3]
}



setInterval(function(){changeTime()},1000)

@import url(https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,900);
body{
  background-image: url("happy-new-year-2021_10.jpg");
  backdrop-filter: blur(7px);
  color:black;
}

.wrapper {
  text-align: center;
}

.container{
  display: inline-block;
  text-align: center;
}

.container span {
  margin: 25px;
}


#hours{
  font-size:60px;
  font-weight:150;
}

#minutes{
  font-size:60px;
  font-weight:150;
}

#seconds{
  font-size:60px;
  font-weight:150;
}


#days{
  font-size:100px;
  font-weight:350;
  margin: 0;
  padding: 0;
  }

h1{
 font-family: roboto;
 font-size:70px;
 font-weight:400;
}
span{
  font-family: roboto;
}
p{
  font-family: roboto;
}


#date{
  font-weight:lighter;
  font-size: 14px;
}


.day-label{
  font-weight:40;
  font-size:25px;
}

.hour-label{
  font-weight:lighter;
  font-family: roboto;
}

.minute-label{
  font-weight:lighter;
  font-family: roboto;
}
.second-label{
  font-weight:lighter;
  font-family: roboto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div class="wrapper">
    <p id="label">How many days until</p>
    <h1>New Year's Day</h1>
    <p id="date">Saturday, 1 January 2022</p>
    
    <p id="days">days</p>
    <p class="day-label">days</p>
    
    <div class="container">
    <span id="hours">21</span><br>
    <span class="hour-label">hours</span>
    </div>
    
    <div class="container">
    <span id="minutes">2</span><br>
    <span class="minute-label">minutes</span>
    </div>
    
    <div class="container">
    <span id="seconds">21</span><br>
    <span class="second-label">seconds</span>
    </div>
    
    <script src="script.js"></script>
      </div>
  </body>
</html>

OMG! Thank you so much! This fixed it! You are a literal life-saver! Sorry about the messy code. Still really new to CSS, JS, & HTML. — , Jan 05 '21 at 17:04

Center text on top of another text

2 Answers2

Linked