elys1um Posted January 22, 2012 Share Posted January 22, 2012 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2012 Share Posted January 22, 2012 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 More sharing options...
elys1um Posted January 22, 2012 Author Share Posted January 22, 2012 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 More sharing options...
dsonesuk Posted January 22, 2012 Share Posted January 22, 2012 They both do work, have you set doctype? Link to comment Share on other sites More sharing options...
elys1um Posted January 22, 2012 Author Share Posted January 22, 2012 Yes.. css: http://www.mediafire.com/?qunw3n6rf6mn8nphtml: http://www.mediafire.com/?luoc0diti8arcvs Thx for the help.. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2012 Share Posted January 22, 2012 Sorry! I don't download anything. Link to comment Share on other sites More sharing options...
elys1um Posted January 22, 2012 Author Share Posted January 22, 2012 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 More sharing options...
dsonesuk Posted January 22, 2012 Share Posted January 22, 2012 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; Link to comment Share on other sites More sharing options...
elys1um Posted January 22, 2012 Author Share Posted January 22, 2012 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 More sharing options...
dsonesuk Posted January 22, 2012 Share Posted January 22, 2012 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 More sharing options...
elys1um Posted January 23, 2012 Author Share Posted January 23, 2012 Thank you so much :)I got it fixed! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.