Vertical align text in CSS doesn't work

Question

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

And you want vertically center the text inside the green background right? — Mathieu Bour, Mar 01 '17 at 18:46

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

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.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 01 '17 at 18:46

Fred Rocha

460
3
15

score 0 · Answer 2 · answered Mar 01 '17 at 18:53

0

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

answered Mar 01 '17 at 18:53

Sailor

183
5

Vertical align text in CSS doesn't work

2 Answers2