PDA

View Full Version : Resolved Why does centering an image add padding/margin above?



scarymonster
Jan 25th, 2010, 01:08 PM
Hi,

I have an image within several nested divs. All divs have zero margin/padding declared explicitly in the CSS.

When I add the following 'centered' class to the image, it creates space above the image:


.centered {
text-align:center;
margin: 0 auto;
padding:0;
}
Used text-align and auto margin to cover centering of inline and block elements.


The html for the image is simply:


<img class="centered" src="resources/images/tourheader.jpg" alt="relevant alt text to go here" width="744" height="150" border="0" />

I have made the image the width of the containing element so I could drop the 'centered' class, but can't work out where this space is coming from.

Happens in slightly different ways in IE6, Opera, Safari and Firefox.

What have I missed?

Thanks,
Andy

abduraooft
Jan 25th, 2010, 01:11 PM
img is an inline element and so the best way to center it is to apply text-align:center; to its (block level) container element.

Happens in slightly different ways in IE6, Opera, Safari and Firefox.

What have I missed? Can we have a link to your page?

scarymonster
Jan 25th, 2010, 01:29 PM
I've uploaded the page to:

http://www.angels.uk.com/thetour.html (http://www.angels.uk.com/thetour.html)

The CSS is here:

http://www.angels.uk.com/resources/css/angelsmain.css

Locally, I changed the background of 'content' div to black to highlight the problem, but can't do this on the live site for obvious reasons.

Don't understand why my 'centered' class adds space above the image. Remove
class='centered' and it's fine.

abduraooft
Jan 25th, 2010, 01:32 PM
You've another style at
img.centered {/*angelsmain.css (line 934)*/
clear:both;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:0;
} which is causing the gap.

PS: Make use of firebug for your FF, to save your development time.

scarymonster
Jan 25th, 2010, 01:41 PM
Thanks so much. Wood, trees etc.

Hugely appreciated!

:D