Search code examples
csstextalignment

Vertical align text in CSS doesn't work

enter image description here

I want to vertical align the text 'SITE NAME' in the green space. It's a H1-text inside a div. The green background is the background of the text and the yellow background is the background of the div with a padding of 5px. I can't solve how to vertical-align the text. I already tried this.

h1 {
    text-align: center;
    background-color: green;
    height: 100%;
    vertical-align: middle; 
    font-size: 25px;
}
Solution

  • Try

    h1 {
    height: 50px;
    line-height: 50px; // height of your h1
}

    you can safely lose the

    vertical-align: middle; 
height: 100%;

    properties.

    Here is a codepen.

    Also, refer to this SO answer for a lengthier conversation. As noted there, this solution is good for one line of text only.