CSS上的文本頂部對齊

我已經創建了一個HTML框架來顯示包含圖像的頂部橫幅，其中包含一個居中標題和一個時鐘，在它下面有一個舞臺區域來顯示一些圖形和圖像。CSS上的文本頂部對齊

我遇到的問題是，當我在橫幅中增加標題的字體大小時，上面留有一些空白，並且隨着字體大小的增加，文本消失（我設置了包含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>

來源

2016-01-12 Ernesto Monroy

問題是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>

來源

2016-01-12 15:30:10 CoderPi

謝謝！解決了！！ –

CSS上的文本頂部對齊

回答

相關問題