Question

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

我遇到的问题是，当我在横幅中增加标题的字体大小时，我上面留下了一些空白区域，随着字体大小的增加，文本消失了（我已将包含div设置为隐藏溢出）。理想情况下，这种间距可以通过一些属性来减少。

我尝试将文字对齐到顶部，但不幸的是我找不到它！即使文本及其div是文档中唯一的内容，行为仍然存在。

使用整页here链接到jsFiddle 链接到隔离的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

问题是div中的<p>标记。你真的不需要它。删除它，并将样式添加到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>

文本顶部对齐CSS

1 个答案: