Jump to content

Centering an image


elys1um
 Share

Recommended Posts

Hi, I tried the following code: ........<body><div class="headerpic"><a href="home.htm" title="Home"><img src="logo.jpg" height="200px" width="200px"/></a></div></body> and this is from the stylesheet:div.headerpic{ display:block; margin:auto; } and the image is not centered! What am I missing?Are there other ways to center an image? Thanks a lot.elys1um.

Edited by elys1um
Link to comment
Share on other sites

you are targeting the outer container element, which is already a block element which means it stretches to the total width of its parent element (body), then applying margin: auto; where there is no space to centre this element. two options

div.headerpic img{display:block;margin:0 auto;}

or because img element is an inline element, its acts like text, so setting the outer parent element to centre everything within it using text-align: center; will accomplish the same thing

div.headerpic {text-align:center;}

Link to comment
Share on other sites

HTML FILE:<div class="headerpic"> <a href="home.htm" title="Home"> <img src="logo.jpg" height="200px" width="200px"/></a></div> CSS FILE:div.headerpic img{text-align:center;} Both your suggestions doesn't work.When I change the css line: "div.header img" to affect "a" (links) I do get a centered image with the first method, but it still has a little annoying nudge to the right.. thx :)

Link to comment
Share on other sites

HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>This is a test website</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div class="header"> <h1>Sea Life</h1></div><div class="center"> <a href="home.htm" title="Home"> <img src="logo.jpg" height="200px" width="200px"/> </a></div><ul><li><a href="dishes.htm">Dishes</a></li><li><a href="loc.htm">Where Are You?</a></li><li><a href="about.htm">About Us</a></li></ul></body></html> CSS:body{background-color:#CCFFFF;}div.header h1{ display:block; margin:auto; width:220px; color:blue; text-align:center; font-weight:bold; padding:5px; border:5px solid blue; }div.center img{display:block;margin:0 auto;}ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; }li{ float:left; }a:hover,a:active{ background-color:#7A991A; }a:link,a:visited { display:block; width:120px; font-weight:bold; color:blue; backround-color:#98bf21; text-align:center; text-decoration:none; }

Link to comment
Share on other sites

By setting the inline element 'a' tag to block element (display:block;) and given it a width, it will by default move to the left, and drag anything within it along with it, unless you centre this element by using margin: 0 auto;
But that's what I did :S
Link to comment
Share on other sites

NO! you are not,

div.center img{display:block;margin:0 auto;}

targets the img within anchor tag, it centres itself within the anchor of width 200px, but does nothing really, as it containing element the anchor tag is 120px wide, as set by

a:link,a:visited {display:block;width:120px;font-weight:bold;color:blue;background-color:#98bf21;text-align:center;text-decoration:none;}

As already mention, text align will not affect a block element, text-align will only affect inline element and text within it, which the img tag is now defined as a block element, the anchors also defined as block, are not affected by text-align, the only way to centre the anchor tag and child element is to use margin: 0 auto; Also I suggest you use an id ref, or class ref for this a tag, to separate the style from default normal a tags, which is probably the main problem here.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...