How to center image using CSS

[bruhnf]

Hi all,
Thanks in advance for taking the time to look at my question. I'm using Zen Cart 1.3.8a. I have just completed a fresh install of ZC on a test site in order to learn CSS. I have always just used the admin tools to make customizations. I've been reading through the FAQ's and the forum and have learned quite a bit but the one simple thing that I can't find is how to center the "Have you got yours yet?" graphic that shows up on the main page of a fresh install. I saw one post that indicated to use the define pages editor to center the graphic but I don't want to do it that way. I want to use CSS.

Using Firebug, I found the area in the stylesheet that controls the behavior of the graphic. It is on line 37 of the default stylesheet and is element "a img". I successfully changed the border from "None" to

a img {border: 1px solid gray;}

and my picture got a 1 pixel gray border around it. So logic would lead me to think that I could use:

{a img {border: none;
margin: 0px auto 0px auto;}

to center the graphic but that didn't work. Is there an area in the stylesheet with more specificity that is controlling the behavior of this graphic?

I have searched most of the morning and can't believe I can't figure this one out so I looking for some guidance here.

Anyone?

My site is www.aprilrobinette.com but like I said, it is only the generic install of ZC so nothing much to see here. It's just a test site.

BTW I am not making mods to the default stylesheet although I reference it above. I have already setup template overrides and am using this method to customize the CSS.

Thanks
Bruhn

[niccol]

The image is inside some<a> tags. The <a> tags take the same size as the image so if you center the image the way you are trying it just centers it within the <a> tags which it already is.

If you really want to center it you need to center the <a> tags.

But as you seem not to be really fussed about this particular image then I would not bother looking for the <a> tags.

In principle you would want to add an ID to this particular set of tags so that you can style them individually and then apply the margins to that ID.

[kobra]

As this graphic is contained within a defines page using the admin editor doe inline adjustment over the stylyesheet is the correct method

Anything that you do to "a img" will impact EVERY linked image on your eventual site

[bruhnf]

Thank you both for the speedy answers. I just finished watching the video on descendant selectors on lynda.com and now see, as you indicated, that by styling the <a> tag, I would also affect all other <a> tags on the site. So I guess I'm back to the admin tool. Damn... here I thought I was on to something big. ;-)

[kobra]

o I guess I'm back to the admin tool. Damn... here I thought I was on to something big

It is BIG, and also has more arms than an octopus - -
but as all knowledge one must use it with reserve

[bruhnf]

Not to belabor the point here, but I was curious if I could do what niccol had suggested and that was wrap this particular <a> tag with a <div> tag and then set the margins using CSS. I know that this is probably not the best practices way to accomplish this, and, as kobra says, knowledge must be used with reserve. That being said, I was able to wrap the <a> tag with a custom <div> tag using the define pages editor and then style the <div> with margins. I am able to move the picture 200px to the right using:

#mypic {margin: 0px 0px 0px 200px;}

... but when I use

#mypic {margin: 0px auto 0px auto;}

I would expect the pic to be centered and it is not. Again, I know this is trivial but I'm trying to learn. Wondering why the pic moves when I use absolute pixel values but not using auto. I guess I need to go watch the video on AUTO. Thanks again for helping me try to understand this stuff. If anyone has any good recommendations for CSS reference material other than lynda.com I would love to check it out. ... but I'm sure that has been posted somewhere so never mind. Don't want to get flamed for not doing my research. :-)

Thanks
Bruhn

[anamestore]

There are some things you need to do first and I'll try to explain before giving the code.

First... wrap the image around a BLOCK
This eliminates the need for < DIV > or < P > tags (which would make everything centered.

Next... you want to tell your browser NOT to center but to make both sides equal. I know it's saying the same thing but the code is more readily undsterandable if you understand how it 'thinks'.

So you are saying: "Take this BLOCK (and everything in it) and make both sides EQUAL"

.logo-img img { display: block; margin-left: auto; margin-right: auto }

. -- do this only once
display:block -- wrap in block
margin-left: auto
margin-right: auto
-- make left and right sides the same

There you go... the 'correct' way to center an image in CSS.

[niccol]

OK. Well #mypic behaves exactly the opposite to the images. It takes up the whole width available to it.

So it is centered!

To center it, the way you want, you need to fix its width. Try:


#mypic {margin: 0px auto 0px auto; width:380px;}

And you'll see what I mean.

Just as an aside - you can also write margin: 0 auto; as a shorter way of expressing it. Not sure about 'correct' as far as css goes. What works works.

[bruhnf]

niccol:

Aha! That worked and it's exactly what I was trying to do. Thanks.

How did you arrive at 380px. All the measurements in the stylesheet are in em's. I'm sure you saw I resized my #mainWrapper to 1000px so I'm wondering what tool you used to find the value of 380. Thanks a bunch for taking the time.


anamestore:

Still trying to figure yours out. Kind of confusing but I'm going to keep trying. Thanks for the response.

[niccol]

Sorry, there was a typo in there.

What I meant to express is that the <a> tags contract until they are the same size as the image inside. That is what you'd expect them to do. Otherwise areas that were not the image would be a link.

So, inside the <a> tags you can't center the image in that fashion because the image already is centered.

The div works differently. With no width associated to it it expands to fill the available width. So, you can't center it in that fashion either without applying a width.

Hope that makes sense