Make <h1> vertically center with CSS?

Question

<header id="logo"> <img src="logo.png" /> <h1>Some text here</h1> </header> 

I use

 h1{display: inline;} 

to make them in one line, but the text is below the image, the image is 48x48px and the text size is 23px, I would like to make the text vetically the center of the image, how can I do this with CSS? You just need to support Chrome.

Thanks for your answers, finally got it working: http://jsfiddle.net/tFdpW/

Answer 1

Like this? http://jsfiddle.net/xs4x6/

 <header id="logo"> <img src="http://dummyimage.com/48x48/f0f/fff" /> <h1>Some text here</h1> </header> header img { vertical-align: top } h1 { display: inline; font-size: 23px; line-height: 48px } 

Answer 2

Try adding vertical-align:middle; to the image.

Example: http://jsfiddle.net/Uxs7w/

Answer 3

 h1{display: inline;line-height:48px;} 

Answer 4

@ wong2; first of all. inline property does not support vertical field filling properties. In addition, there are other options.

first: remove display:inline and give a float it.

 img, h1{float:left;} h1{margintop:15px; margin-left:10px;} 

second: type display:table .

 #logo{display:table} img, h1{display:table-cell} h1{vertical-align:middle;} 

thrid: if you do not want to remove display:inline .

 h1{display: inline;line-height:48px;} 

Answer 5

if the logo header got the correct height, just use the css vertical-align:middle property

http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 6

Try using

 h1 { display: table-cell; vertical-align: middle; }