Search code examples
javascripthtmlcssvertical-alignment

Set Javascript output vertical alignment to middle?

I have a Javascript clock showing in a thin frame:

http://i.imgur.com/kyoZ5c8.png

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

Unfortunately, I cannot get the vertical alignment inside the frame to MIDDLE, although I have set vertical-align: middle.

So how can I center it vertically?

Solution

  • The vertical-align property applies to inline level and table-cell elements; and div's display property is block by default, so vertical-align property is ignored.

    Use line-height: 32px(same as the height) instead.

    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>