CODEWITHSUNDEEP
css
justanotherhobbyist
justanotherhobbyist

Reputation: 2190

Positioning <img> nicely with rest of text in <h1>

I would like to position an <img> tag nicely with the rest of my text in a <h1> tag.

I have no idea how to do this though. Padding moves both text and image.

http://jsfiddle.net/vUCr9/ This is what I have, I would like the text to be nicely centered with the image.

Anyone got any good solutions?

Upvotes: 0

Views: 41

Answers (4)

methyl
methyl

Reputation: 3312

Use position:relative on img and then position it by left: Xpx; top:Xpx or whatever, like that:

img{
  position: relative;
  top: 6px;
  left: 4px;
}

Here is jsFiddle

Upvotes: 1

David Thomas
David Thomas

Reputation: 253368

Specify the vertical-align-ment of the image:

h1 {
    font:35px 'Russo One', sans-serif;
}
​h1 img {
    vertical-align: middle;
}​

JS Fiddle demo.

References:

Upvotes: 4

Johan_
Johan_

Reputation: 440

<h1>HTML<img style="vertical-align:middle;" 
src="https://si0.twimg.com/profile_images/1730750300/HTML5_Badge_128_normal.png" 
alt="5" /> LOGO</h1>

This is how you can fix it with inline style

jsfiddle.net/JZGAF

Upvotes: 0

j08691
j08691

Reputation: 207916

Try:

h1 img{
    vertical-align:middle;
}
​

jsFiddle example.

Upvotes: 1

Related Questions