Water Posted February 12, 2011 Share Posted February 12, 2011 This is confusing, I think I'm doing everything right yet still....images won't centre for me.I have in my css file:img.middle {display: block;margin-left: auto;margin-right: auto }and then in my page:<img alt="logo" class="middle" src="logo.jpg">yet stil the image always comes out stuck to the left in its default position. Any ideas? Link to comment Share on other sites More sharing options...
cousineaug Posted February 12, 2011 Share Posted February 12, 2011 This is confusing, I think I'm doing everything right yet still....images won't centre for me.I have in my css file:img.middle {display: block;margin-left: auto;margin-right: auto }and then in my page:<img alt="logo" class="middle" src="logo.jpg">yet stil the image always comes out stuck to the left in its default position. Any ideas?see this thread started by sepotoPerhaps there will be a more elegant solution later. Link to comment Share on other sites More sharing options...
thescientist Posted February 12, 2011 Share Posted February 12, 2011 This is confusing, I think I'm doing everything right yet still....images won't centre for me.I have in my css file:img.middle {display: block;margin-left: auto;margin-right: auto }and then in my page:<img alt="logo" class="middle" src="logo.jpg">yet stil the image always comes out stuck to the left in its default position. Any ideas?Well, firstly, a block level element (even an inline element made into a block level element) will automatically expand to fit the width of it's container. With that in mind, this will negate centering, so this means you need to define a width (less than the container width) in order for it to be centered. You could just remove the display: block and use text-align: center on the parent container. Given what you've shown us, it me be worth posting all your code. Also, a shortcut method versus using margin left/right auto is to just do this:margin: 0px auto Link to comment Share on other sites More sharing options...
Water Posted February 13, 2011 Author Share Posted February 13, 2011 Ah, so it has to be in a container? That could explain things. Link to comment Share on other sites More sharing options...
thescientist Posted February 13, 2011 Share Posted February 13, 2011 not quite. the image just has to become a block level element and given a width if you're going to center it using margin. Or you put it in a container and use text align ont the container (parent). Link to comment Share on other sites More sharing options...
cousineaug Posted February 13, 2011 Share Posted February 13, 2011 This is confusing, I think I'm doing everything right yet still....images won't centre for me.I have in my css file:img.middle {display: block;margin-left: auto;margin-right: auto }and then in my page:<img alt="logo" class="middle" src="logo.jpg">yet stil the image always comes out stuck to the left in its default position. Any ideas?I am confused also because it works for me usign google Chrome. What browser are you using?As was suggested, post the whole code or a link to your sitehere is what I have that works<html><head><style type="text/css">img.middle { display: block;margin-left: auto;margin-right: auto}</style></head><body><img alt="logo" class="middle" src="logo.jpg"></body></html> the image is centered left to right as the code says.What did you do differently? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.