user6395724 user6395724 - 3 months ago 8
CSS Question

Centering text is messing up my header

I want to center text in my header, the header takes up 100% of the view height and 100% of the width and does only consist of a solid color. When i center the text (Hello) the header is "pushed" down leaving white space and i have no clue how to fix this.



#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
}
#body {
margin: 0;
}

<header id="mainHeader">

<p id="hello">
&ltHello&gt
</p>

</header>





(The text needs to be centered vertically when window is zoomed by default)

Answer

I made a jsfiddle and I saw the white box above the header. I added a margin-top: 0 to the css at #hello and it seems to work for me. Test it out!

#mainHeader {
        background-color: #282828;
        width: 100%;
        height: 100vh;  
    }

#hello {
    color: #f2f2f2;
    font-size: 200px;
    font-family: monospace;
    margin-bottom: 0;
    text-align: center;
    margin-top: 0;
}

#body { 
    margin: 0;
}

EDIT:

To fix what he wanted to do I used the flex-property to allign the items in the middle of the header like this:

#mainHeader {
    background-color: #282828;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center; (vertical center)
    align-items: center;  (horizontal center)
}