Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make <h1> vertically center with CSS?

Tags:

html

css

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

I use

h1{display: inline;}

to make them in the same line, but the text is lower than the image, the images is 48x48px and the text size is 23px, I'd like to make the text vetically center to the image, how could I do that with CSS? Just need to support Chrome.

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

like image 514
wong2 Avatar asked Jun 09 '11 10:06

wong2


1 Answers

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
}
like image 119
thirtydot Avatar answered Oct 08 '22 19:10

thirtydot