将 Javascript 输出垂直对齐设置为中间？

Question

我有一个 Javascript 时钟显示在细框内：

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE>Untitled</TITLE>
  <SCRIPT>
      function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
      }
      function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        // add a zero in front of numbers<10
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime()
        }, 500);
      }
  </SCRIPT>
</HEAD>
<BODY onload="startTime()">
  <DIV id="time" style="width: 95px; height: 32px; border: solid; border-width: thin; text-align: center; vertical-align: middle"><p>time</p></DIV>
</BODY>
</HTML>

不幸的是，尽管我设置了 vertical-align: middle.

，但我无法将框架内的垂直对齐设置为 MIDDLE

那么如何才能垂直居中呢？

Answer 1

你可以试试line-height 属性:

line-height: 32px;

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function () {
    startTime()
  }, 500);
}
startTime();

<DIV id="time" style="width: 95px; height: 32px; border: solid; border-width: thin; text-align: center; line-height: 32px;"><p>time</p></DIV>

Answer 2

可能是最简单的解决方案：使用 line-height: 32px;。这将使线条本身与框一样高，并且文本将或多或少居中，具体取决于字体。

Answer 3

vertical-align 属性适用于行内级别和 table-cell 元素； div 的 display 属性默认为 block，因此 vertical-align 属性将被忽略。

改用line-height: 32px（与height相同）。

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function() {
    startTime()
  }, 500);
}

<body onload="startTime()">
  <div id="time" style="width: 95px; height: 32px; border: solid; border-width: thin; text-align: center; line-height: 32px;">
    <p>time</p>
  </div>
</body>

将 Javascript 输出垂直对齐设置为中间？

Set Javascript output vertical alignment to middle?

html

javascript

css

vertical-alignment