CODEWITHSUNDEEP
csshtml
wong2
wong2

Reputation: 35730

Make <h1> vertically center with 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/

Upvotes: 7

Views: 19876

Answers (6)

dimanus
dimanus

Reputation: 1

Try to use

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

Upvotes: 0

sandeep
sandeep

Reputation: 92793

@wong2; first of all. inline property doesn't support vertical margin, padding properties .So, there are other options.

first: remove display:inline & give float to it.

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

second: give display:table to it.

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

thrid: if don't want to remove display:inline.

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

Upvotes: 2

jimplode
jimplode

Reputation: 3502

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

Upvotes: 3

thirtydot
thirtydot

Reputation: 228182

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
}

Upvotes: 16

Floern
Floern

Reputation: 33904

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

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

Upvotes: 3

VAShhh
VAShhh

Reputation: 3504

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

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

Upvotes: 1

Related Questions