BenH70 BenH70 - 1 month ago 9
CSS Question

How to center a DIV created by Javascript?

Here is my code for a counter (modified from www.w3schools.com code).

I'm struggling to horizontally center the output. I have tried to wrap in a DIV and then use the following techniques to center that DIV, but no success, any pointers appreciated:


  1. Using CSS to style the outside DIV with
    text-align: center;

  2. Using CSS to style the outside DIV with
    margin-left: auto;
    &
    margin-right:auto;

  3. Using Javascript to set the
    margin
    property of the output horizontally align;



<!DOCTYPE HTML>
<html>
<head>
<style>
.bigger {
text-align: center;
font-size: 1.35em;
}
.counter_p {
text-align: center;
font-size: 6em;
padding: 0px 0px 0px 0px;
line-height: 1em;
}
.counter_label {
font-size: 0.2em;
line-height: 1em;
}

}
</style>
</head>
<body>
<div class="counter_p" id="counter"></div>
<script>
function pad(str, max) {
return str.length < max ? pad("0" + str, max) : str;
}

// Set the date we're counting down to
var countDownDate = new Date("Sep 1, 2017 15:37:25").getTime();

// 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 an the count down date
var distance = countDownDate - now;

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

var minutes = pad(String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);
var seconds = pad(String(Math.floor((distance % (1000 * 60)) / 1000)),2);


// My attempt at horizontally centering the output
document.getElementById('counter').style.margin = '0 auto';

// Output the result in an element with id="counter"
document.getElementById("counter").innerHTML =
"<div style='text-align:center'>"
+ "<table border='0'>"
+ "<tr>"
+ "<td>"
+ "<div>"+ days + "</div>"
+ "<div class='counter_label'>Days</div>"
+ "</td>"
+ "<td class='bigger'>|</td>"
+ "<td>"
+ "<div>" + hours + "</div>"
+ "<div class='counter_label'>Hours</div>"
+ "</td>"
+ "<td class='bigger'>|</td>"
+ "<td>"
+ "<div>" + minutes + "</div>"
+ "<div class='counter_label' >Mins</div>"
+ "</td>"
+ "<td class='bigger'>|</td>"
+ "<td>"
+ "<div>" + seconds + "</div>"
+ "<div class='counter_label'>Secs</div>"
+ "</td>"
+ "<td>"
+ "</tr>"
+ "</table>"
+"</div>";


// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("counter").innerHTML = "Countdown is complete";
}
}, 1000);
</script>
</body>
</html>

Answer Source

Creating a container div to hold the countdown text works in this case (using the CSS flexbox with justify-content set to "center") - flexbox works correctly on window resize:

<!DOCTYPE HTML>
    <html>
    <head>
    <style>


    .bigger {
      text-align: center;
      font-size: 1.35em;
    }
    .counter_p {
      text-align: center;
      font-size: 6em;
      padding:0px 0px 0px 0px;
      line-height:1em;

    }
    .counter_label {
        font-size:0.2em;
        line-height:1em;
    }
    .container {
      display: flex;
      justify-content: center;
    }

    }
    </style>
    </head>
    <body>
    <div class="container">
        <div class="counter_p" id="counter"></div>
    </div>
    <script>

      function pad (str, max) {
          return str.length < max ? pad("0" + str, max) : str;
        }

    // Set the date we're counting down to
    var countDownDate = new Date("Sep 1, 2017 15:37:25").getTime();

    // 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 an the count down date
        var distance = countDownDate - now;

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

        var minutes = pad(String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);
        var seconds = pad(String(Math.floor((distance % (1000 * 60)) / 1000)),2);

        // Output the result in an element with id="counter"

    document.getElementById("counter").innerHTML = "<div style='text-align:center'><table border='0'><tr><td><div>"+ days + "</div><div  class='counter_label' >Days</div></td><td class='bigger'>|</td><td><div>" + hours + "</div><div class='counter_label'>Hours</div></td><td class='bigger'>|</td><td><div>"
        + minutes + "</div><div class='counter_label' >Mins</div></td><td class='bigger'>|</td><td><div>" + seconds + "</div><div class='counter_label'>Secs</div></td><td></tr></table></div>";



        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);

    document.getElementById("counter").innerHTML = "Countdown is complete";
        }
    }, 1000);
    </script>

    </body>
    </html> 

Note: CSS Flexbox is not supported in older browsers, see CSS Flexible Box Layout Module