Question

我在边框内对齐文本时遇到问题。文本必须在边框的中央。

As you can see the text is slightly right and the number is slightly left

我设法使其在chrome上运行，但在代码笔，Safari或Internet Explorer上却无法运行。这是codepen

这是我的HTML

data.frame(year=rep(2018:2020,52),weak=rep(c(1:52),3))

// 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;
}

感谢您的任何帮助！

Answer 1

我更改了H2元素的柔韧性方向，而不是使用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>

Answer 2

使用此CSS代替您的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;
}

您的h1置于倒数div上方

<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>

Js Countdown文字不在边框中央

2 个答案: