Question

我无法将一段文字放在页面中央。这是我试图集中的文字：

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

使用上面的代码，当全屏显示时，文本在我的浏览器中（有些）居中。当我改变浏览器的大小时，文本变得笨拙而且根本没有居中。我知道我需要指定文本的高度和宽度，但有更简单的方法吗？或者有人可以帮我解决这篇文章的高度和宽度吗？

由于

Answer 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指定一个特定的宽度，并将左边和右边的边距设置为auto。这将使它居中。这实际上是大多数中心布局的工作方式。即使浏览器窗口小于实际内容，它看起来也很好。

<强>的jsfiddle

http://jsfiddle.net/o4exkcjo/

Answer 2

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

以完整页面模式运行代码段：）

＆＃13;

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

＆＃13;

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

＆＃13;

或

＆＃13;

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

＆＃13;

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

＆＃13;

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

BONUS：另一张像展示

的桌子

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

水平和垂直居中定位未知的height和width元素，操作简单如下。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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 - 用作模态对话框。

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

4 个答案: