如何确定 HTML 中文本的高度和宽度？答案

【问题标题】：How to determine height and width of text in HTML?如何确定 HTML 中文本的高度和宽度？
【发布时间】：2015-04-15 23:58:03
【问题描述】：

我无法将文本块置于页面中心。这是我要居中的文本：

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

在我的级联样式表中，我有以下内容：

#DIRECTIONS{
    position:absolute;
    top:80px;
    left:31.5%;
    text-align:center;
}

使用上面的代码，当它全屏时，文本（有点）在我的浏览器中居中。当我更改浏览器的大小时，文本变得笨拙地移动并且根本没有居中。我知道我需要指定文本的高度和宽度，但有没有更简单的方法呢？或者有人可以帮我看看这个文本的高度和宽度是多少？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

居中布局的工作方式如下：

HTML

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

CSS

#DIRECTIONS
{
    width: 500px;
    margin: 0 auto;
    background-color: #f0f0f0;
}

给内部 DIV 一个特定的宽度，并将左右边距设置为自动。这将使其居中。这实际上是大多数居中布局的工作方式。即使浏览器窗口小于实际内容，它也看起来不错。

jsFiddle

http://jsfiddle.net/o4exkcjo/

【讨论】：

【解决方案2】：

您可以放弃位置并改用显示：

运行 sn-ps un full page 模式:)

#DIRECTIONS {
  display:table;
  margin:auto;
  background:gray;/* demo purpose */
  font-size:1vw;
  }

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

或

html {
  height:100%;/* so can middle center too :) */
  width:100%;
  display:flex;
  }
body {
  margin:auto;
  }
#DIRECTIONS{
  background:gray;
  font-size:1vw;
  }

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

position:absolute;，除非应避免用于众所周知的目的:)

BONUS：另一个表格，如显示

html {
  height:100%;
  width:100%;
  display:table;
  }
body {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  }
#DIRECTIONS {
  display:inline-block;
  background:gray;
  text-align:left;
  font-size:1vw;
  }

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

【讨论】：

【解决方案3】：

将未知的height 和width 元素水平和垂直居中可以如下简单完成。

.element {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.element {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="element">
     Hello World!
</div>

【讨论】：

【解决方案4】：

您可以使用良好的旧表格将任何内容垂直和水平居中，并结合固定或绝对位置。

html, body {
    position: relative;
    font-family: sans-serif;
    font-size: 14px;
    height: 100%;
    margin: 0;
}
#directions {
    position: fixed;
    z-index: 1000;
    text-align: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: none rgba(0, 0, 0, .3);
}
#directions h2 {
    font-size: 14px;
}

<table id="directions">
    <tbody>
        <tr>
            <td>
                 <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!<br />
            Hold down the shift key to rotate the desired face counter-clockwise.<br />
            Use your mouse to rotate the cube and zoom in and out.</h2>

            </td>
        </tr>
    </tbody>
</table>

Fiddle playground - 用作模式对话框。

【讨论】：