Image Off Center - any CSS ideas?

[brotherantonio]

Greetings!

Working with a new HTML5 theme and in an attempt to make my landscape oriented product images a little larger, I have burnt my brain out trying to find hat css code my work to get those images centered. I just spent way too much time on such a small thing trying different position, alignment, and centering codes. Nothing is working.

The code I am working with is:

.product-item .img img {
max-height: 100%;
max-width: 150%;
}

I have purposely made the max-width 150% so the horizontal images can display a bit larger. And, that has nudged all of the horizontal images to the right. Simply seeking whatever lines of css i might need to tell that image to stay centered. :-)

This code is directly affecting images on my home page which you can view at: Welcome to The Sound Healing Store - Igniting The Spirit of Sound for Peace of Mind and Soul Awakening

Thanks for any suggestions you have!

~ Antonio ~

[Hondo69]

I'm having the same problem on my category pages. The stars showing each product review are aligned left, but I want them centered like the rest of the information for each product listed.

All but the image started out aligned left, but I fixed that by inserting
style="text-align:center"
within the <DIV> tag for the whole product block.

All the text then became centered, but the review stars were still aligned to the right. The culprit appears to be this CSS

.product-item .stars img {
float: left;
}

I tried to override that CSS by putting this before the image link to the stars:
<div style="margin-left: auto; margin-right: auto">
No luck

[thecartdesigner]

.product-item .stars img {
float: left;
}

Don't try to override it. Everything that needs to be changed (divs/classes/etc) to fix the issues is already there. Your just adding code and rules that don't need to be there if you do... Just change the rule and add it to your default_modified.css.

Use This:

.product-item .stars img {
float: none;
}

[thecartdesigner]

Working with a new HTML5 theme and in an attempt to make my landscape oriented product images a little larger, I have burnt my brain out trying to find hat css code my work to get those images centered. I just spent way too much time on such a small thing trying different position, alignment, and centering codes. Nothing is working.

Change the rules as you have them to below:

.product-item .img {
height: 110px;
margin: 0 auto;
max-width: 150px;
padding: 0;
text-align: center;
width: 100%;
}

/**REMOVE THIS RULE ALL TOGETHER FROM YOUR ACTIVE CSS FILE **/
.product-item .img img {
max-height: 100%;
max-width: 150%;
}

That's it. Now they should be nice and centered. If you want the images to be a different size just change the max-width:150px in the top rule. Do not use a percentage there though.

Hope this helps

[brotherantonio]

Hey Shaun!

Well, you did it again! And, once again, you schooled the 3DCart techs on this one. Seems like it would be an easy fix for something like centering an off-center image. The fix they gave me did not work, so I am grateful for your suggestion.

Thank You!

Bless The Day,
~ Antonio ~

[Hondo69]

Don't try to override it. Everything that needs to be changed (divs/classes/etc) to fix the issues is already there. Your just adding code and rules that don't need to be there if you do... Just change the rule and add it to your default_modified.css.

Use This:

.product-item .stars img {
float: none;
}

Thank you, that did the trick