Question

我试图创建一种带标题的横幅。但是当我尝试将<h2>标题放在<div>中时。由于某种原因它似乎中途下降。我知道我可以通过margin-top - 20px左右来修复它，但这让我觉得我不得不这样做。

代码（https://jsfiddle.net/j5ba4ajo/3/）：

＆＃13;

h2 {
  text-align: center;
}
#player-opponent {
  width: 545px; 
  height: 40px; 
  background-color: red;
  float: left;
  margin-left:5px;
  margin-top:5px;
}

＆＃13;

<div id = "player-opponent">
  <h2>Player x vs player y<h2>
</div>

＆＃13;

Answer 1

默认情况下<h2>有一个保证金。你必须删除它。要垂直居中<h2>的文字，您必须将height和line-height设置为容器的height（#player-opponent）：

＆＃13;

h2 {
  font-family: "Trebuchet MS";
  text-align: center;
  position:relative;
  margin:0;
  height:40px;
  line-height:40px;
}
#player-opponent {
  width: 545px; 
  height: 40px; 
  background-color: red;
  float: left;
  margin-left:5px;
  margin-top:5px;
}

＆＃13;

<div id="player-opponent">
  <h2>Player x vs player y</h2>
</div>

＆＃13;

Answer 2

添加：line-height：0;到了h2。这将解决它 - 或者如果你愿意，你可以弄乱h2上的填充。这将修复它而不会弄乱你的填充。

h2 {
    text-align: center;
    line-height:0
}

Answer 3

将margin: 0;添加到h2，以避免每个浏览器添加到标题元素的默认边距。

https://jsfiddle.net/07syo5zp/

Answer 4

将此添加到＃player-opponent以使事情更好。根据您的偏好，h2上的保证金可能需要也可能不需要任何更改。

align-items: center;
display: flex;
justify-content: center;

Answer 5

实际上问题是 h2 正在溢出，所以你可以通过

来实现它

 h2 {
     overflow: auto;
  }

#player-opponent {
     width: 545px; 
     height: 40px; 
     background-color: red;

  }

H2出现在div的中间

5 个答案: