CODEWITHSUNDEEP
csstextalignment
Soccerlife
Soccerlife

Reputation: 751

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

Upvotes: 0

Views: 1006

Answers (2)

Fred Rocha
Fred Rocha

Reputation: 440

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.

Upvotes: 2

Sailor
Sailor

Reputation: 183

you can refer to the below link. I tried a little in w3schools

https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height

Upvotes: 0

Related Questions