Best way to vertically center text and buttons

Question

I am currently developing a website but have a question in relation to vertically centering.

I have created a header with a logo and some text by the logo. How do I make it so that both the logo and the text are exactly in the middle of the header?? This also applies for the sections where I want text/buttons to be in the middle. Thank you.

Here is the code: -

For the header I have just had to use relative positioning to guess where the middle is. But for the sections I have used padding which I am not sure is right.

Thanks for the help.

Try http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css and http://vanseodesign.com/css/vertical-centering/ — kiranvj, Dec 31 '15 at 18:01

score 0 · Answer 1 · answered Dec 31 '15 at 17:54

0

This is what i typically do using CSS, wrap the img and text in a div, call it whatever like innerDiv

#innerDiv {
width: 50%;
margin: 0 auto;
}

answered Dec 31 '15 at 17:54

MrEhawk82

751
2
8
22

score 0 · Answer 2 · answered Dec 31 '15 at 17:54

0

Remove the margins from the header img and add the following to the header:

width: 100%;
display: table;
text-align: center;

answered Dec 31 '15 at 17:54

DaMaGeX

615
5
14

Best way to vertically center text and buttons

2 Answers2