文字在CSS上对齐

Question

I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.

The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.

I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.

Link to the jsFiddle with the whole page here Link to the isolated div here

Is there a property I am missing, or another trick to move the text upwards?

 <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

The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:

Staged Title

Demo:

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