当时钟滴答作响时，一切都在移动

Question

我做了一个时钟，格式如下。 HH:MM AM HH:MM S

我的问题是，每当秒数发生变化时，分钟和小时就会被推来推去以适应数字。我的字体 Modern Sans 不是等宽字体，这可能是造成这种情况的主要原因，但我想保留该字体，当然只是在可能的情况下。我也想让时钟在页面上居中。
感谢您的帮助！

编辑： 请全屏查看代码段。它在常规框中表现得有点奇怪（呃）。

function updateClock() {
  var date = new Date();
  var h = (date.getHours() + 24) % 12 || 12,
    m = date.getMinutes(),
    s = date.getSeconds(),
    dm = "AM";
  if (h >= 12)
    dm = "PM";
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  $(".mt.h").html(h);
  $(".mt.m").html(m);
  $(".mt.s").html(s);
  $(".mt.dm").html(dm);
  setTimeout(updateClock, 1000);
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
}

* {
  font-family: "Modern Sans", Helvetica;
}

.main-content {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.search {
  vertical-align: middle;
}

.clock {
  color: rgba(0, 0, 0, 0.65);
}

.clock .unflex div {
  display: inline-block;
}

.clock .unflex {
  display: inline;
}

.mt.h,
.mt.m,
.mt.c {
  font-size: 250px;
}

.mt.s {
  font-size: 125px;
  color: rgba(250, 0, 0, 0.45);
}

.mt.dm {
  font-size: 75px;
}

.flexclock {
  position: relative;
  top: -125.5px;
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
</head>

<body onload="updateClock()">
  <div class="main-content">
    <div class="clock">
      <div class="unflex">
        <div class="mt h"></div>
        <div class="mt c">:</div>
        <div class="mt m"></div>
      </div>
      <div class="flexclock">
        <div class="mtsdm">
          <div class="mt dm"></div>
          <div class="mt s"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

由于不同的数字字符有不同的宽度，为了避免在这种情况下文本移动，可以为每个项目设置一个足够宽的宽度，这样它们就不会影响周围的环境。

另一种选择也是绝对定位，但我发现下面的更好，响应更快。

这里我added/updated这些规则

.mt.h {
  width: 160px;
}
.mt.m {
  width: 320px;
}
.mt.c {
  width: 80px;
}

.mt.s {
  font-size: 125px;
  color: rgba(250, 0, 0, 0.45);
  width: 160px;
}

堆栈片段

function updateClock() {
  var date = new Date();
  var h = (date.getHours() + 24) % 12 || 12,
    m = date.getMinutes(),
    s = date.getSeconds(),
    dm = "AM";
  if (h >= 12)
    dm = "PM";
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  $(".mt.h").html(h);
  $(".mt.m").html(m);
  $(".mt.s").html(s);
  $(".mt.dm").html(dm);
  setTimeout(updateClock, 1000);
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
}

* {
  font-family: "Modern Sans", Helvetica;
}

.main-content {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.search {
  vertical-align: middle;
}

.clock {
  color: rgba(0, 0, 0, 0.65);
}

.clock .unflex div {
  display: inline-block;
}

.clock .unflex {
  display: inline;
}

.mt.h,
.mt.m,
.mt.c {
  font-size: 250px;
}

.mt.h {
  width: 160px;
}
.mt.m {
  width: 320px;
}
.mt.c {
  width: 80px;
}

.mt.s {
  font-size: 125px;
  color: rgba(250, 0, 0, 0.45);
  width: 160px;
}

.mt.dm {
  font-size: 75px;
}

.flexclock {
  position: relative;
  top: -125.5px;
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
</head>

<body onload="updateClock()">
  <div class="main-content">
    <div class="clock">
      <div class="unflex">
        <div class="mt h"></div>
        <div class="mt c">:</div>
        <div class="mt m"></div>
      </div>
      <div class="flexclock">
        <div class="mtsdm">
          <div class="mt dm"></div>
          <div class="mt s"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

当时钟滴答作响时，一切都在移动

Everything moves around when clock ticks

javascript

css

clock

flexbox