文字在CSS上對齊

Question

我創建了一個HTML框架來顯示頂部橫幅，其中包含圖像，居中標題和時鍾，在其下方，有一個舞台區域可以顯示一些圖形和圖像。

我遇到的問題是，當我增加橫幅中標題的字體大小時，上面留有一些空白，並且隨着字體大小的增加，文本消失了（我將包含div的值設置為隱藏溢出）。 理想情況下，此間隔可以通過某些屬性來減小。

我嘗試搜索使文本與頂部對齊，但不幸的是我找不到它！ 即使文本及其div是文檔中唯一的內容，也存在該行為。

鏈接到的jsfiddle與整個頁面在這里鏈接到隔離DIV 這里

是否缺少我想要的屬性，或者還有其他技巧可以將文本向上移動？

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