Question

我想在标题中居中文字，标题占据视图高度的100％和宽度的100％，并且只包含纯色。当我将文本居中（Hello）时，标题是＆＃34; push＆＃34;离开白色空间，我不知道如何解决这个问题。

＆＃13;

#mainHeader {
  background-color: #282828;
  width: 100%;
  height: 100vh;
}
#hello {
  color: #f2f2f2;
  font-size: 200px;
  font-family: monospace;
  margin-bottom: 0;
  text-align: center;
}
#body {
  margin: 0;
}

＆＃13;

<header id="mainHeader">

  <p id="hello">
    &ltHello&gt
  </p>

</header>

＆＃13;

（默认情况下，当窗口缩放时，文本需要垂直居中）

Answer 1

我做了一个jsfiddle，我看到了标题上方的白框。我在margin-top: 0向css添加了#hello，它似乎对我有用。测试一下！

#mainHeader {
        background-color: #282828;
        width: 100%;
        height: 100vh;  
    }

#hello {
    color: #f2f2f2;
    font-size: 200px;
    font-family: monospace;
    margin-bottom: 0;
    text-align: center;
    margin-top: 0;
}

#body { 
    margin: 0;
}

编辑：

要修复他想要做的事情，我使用flex - 属性来对齐header中间的项目，如下所示：

#mainHeader {
    background-color: #282828;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center; (vertical center)
    align-items: center;  (horizontal center)
}

Answer 2

空格与居中文字无关。这是适用于段落的默认margin-top和collapsing margins的组合。

将margin-top: 0添加到#hello的规则中。

Answer 3

也许你可以玩padding-top属性！当然，我已经删除了#mainHeader { background-color: #282828; width: 100%; height: 100vh; } #hello { padding-top: 100px; color: #f2f2f2; font-size: 200px; font-family: monospace; margin: 0 auto; text-align: center; } #body { margin: 0; }默认添加的保证金顶部...

{{1}}

居中文字弄乱了我的标题

3 个答案: