html - CSS 上的文本顶部对齐

Question

我创建了一个 HTML 框架来显示一个顶部横幅，其中包含一个图像、一个居中的标题和一个时钟，在它下面，有一个舞台区域来显示一些图形和图像。

我遇到的问题是，当我增加横幅标题的字体大小时，上面会留下一些空白，随着字体大小的增加，文本消失了(我已将包含的 div 设置为 overflow hidden )。理想情况下，可以通过某些属性减小此间距。

我尝试搜索将文本对齐到顶部，但不幸的是我找不到它!即使文本及其 div 是文档中的唯一内容，该行为也会存在。

整个页面的 jsFiddle 链接 here链接到独立的 div here

是否有我遗漏的属性，或其他向上移动文本的技巧？

<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
  <div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
    img
  </div>
  <div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
    <p style="text-align:center;font-size: 2.5em;">Staged Title</p>
  </div>
  <div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
    <p id="timeNow" style="font-size: 2.5em;text-align:center">
      10:00
    </p>
  </div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
  Stage is managed with JS
</div>

Answer 1

问题是 <p> div 内的标记。你在这里真的不需要它。删除它，并将样式添加到 div 元素:

分阶段标题

演示:

.bannerMiddle {
  width: 70vw;
  height: 10vh;
  overflow: hidden;
  float: left;
  background-color: blue;
  text-align: center;
  font-size: 2em;
}

<div class="bannerMiddle">
  Staged Title
</div>

<br style="clear: left"><br>

<div class="bannerMiddle">
  <p>Staged Title (BAD)</p>
</div>