Newbie: How can I CENTER the Main Image on product description?

[hugozc]

ZC: 1.3.8a

Please refer to my website: http://hugocruzgallery.com/shop/inde...&products_id=1

I hope this is an easy answer for someone whom is more experienced. But I have searched high and low and added lines on the CSS but nothing seems to do what I am looking for. I am simply trying to center the MAIN IMAGE (like I centered the 'h1' Title).

I have Firefox and Firebug and tried every CSS possibility (that I could come up with). I would really appreciate it if someone could tell me exactly what CSS line/command I need to enter and where (line number) it should be entered to do this?

Thank you in advance.

[hugozc]

Furthermore ...

I am guessing it will be around line 856 in my stylesheet.css under #productMainImage img. If my assumption is correct then GREAT! However, I have no idea what CSS line/code would work to CENTER the main image. I have tried:

vertical-align: center; (no change)
text-aligh: center; (no change)

Please let me know where I went wrong. Thank you.

[hugozc]

Well, it looks like I answered my own question. Amazing what a little Googling can get you :-). It seems as though the correct CSS commands are:

display: block;
margin-left: auto;
margin-right: auto }

and I (or you) can add this to your main image heading (read my previous comment). Seems to work perfectly on my site.

Yet, if any one with CSS experience sees a problem with what i did then please throw in your two cents. I will gladly accept any advice that comes my way.

[hugozc]

EDIT UPDATE: I just noticed my image is NOT perfectly centered (perhaps about 25px too far to the RIGHT). AAAaaarrrgh!!! Anyone have any ideas or advice on how to CENTER this perfectly?

Also, the CSS centering works on IE but Firefox still has the image LEFT aligned ... ????

-- Thank you.

Refer to: http://hugocruzgallery.com/shop/inde...&products_id=4

[s_t_e_v_e]

You will need to edit your template file;

\includes\templates\custom\templates\tpl_modules_main_product_image.php

change the line;
<div id="productMainImage" class="centeredContent back">

to;

<div id="productMainImage" class="centeredContent">

removing the class "back" will stop the image being floated to the left.

[s_t_e_v_e]

Get yourself Firebug - an extension for Firefox... A great tool for troubleshooting CSS and Template issues.

[hugozc]

s_t_e_v_e,

THANK YOU! THANK YOU! THANK YOU!!!! You are the best! I cannot believe it was such a small edit (omitting the word "back"). Wow, the image is centered just the way I want it to be. I would have never come up with this solution on my own.

I already had Firebug and web Developer for Firefox ... Yes, you are completely correct. They are great add-ons/tools for tinkering newbies, like me, to expert programmers.

Thanks again!