我在对齐边框内的文本时遇到问题。文本需要位于边框的中央。
As you can see the text is slightly right and the number is slightly left
我设法让它在 chrome 上运行，但它在 code pen、safari 或 internet explorer 上不起作用。这是 codepen
这是我的 HTML
// 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>";
});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>提前感谢您的帮助!
最佳答案
我已经更改了 H2 元素的 flex-direction，而不是使用 span 和 br 元素，我使用了 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 = `<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>关于javascript - Js倒计时文本不在边框中心内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52221510/