Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Centering the Add to Cart button

Centering the Add to Cart button

Locked

Views: 697

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
28 Jun 2010, 10:17 PM
#1
fiddycent avatar

fiddycent

New Zenner

Join Date:
Apr 2007
Posts:
12
Plugin Contributions:
0

Centering the Add to Cart button

I want to center the Add to Cart button (or in my case, since I'm in showroom mode, it says "Contact Us" instead of "Add to Cart") when viewing an individual product. I'm using 1.3.9c.

I found the following in my stylesheet.css file:

/*Shopping Cart Display*/
#cartAdd {
    float: right;
    text-align: center;
    margin: 1em;
    border: 1px solid #000000;
    padding: 1em;
}

I tried commenting out the float:right line, and it just makes the button stretch across the whole screen. Any help or thoughts from a CSS whiz out there? Am I even looking in the right file?

29 Jun 2010, 8:51 AM
#2
10west avatar

10west

New Zenner

Join Date:
Feb 2010
Location:
Arizona
Posts:
50
Plugin Contributions:
0

Re: Centering the Add to Cart button

try float: middle, instead of commenting it out

29 Jun 2010, 1:47 PM
#3
fiddycent avatar

fiddycent

New Zenner

Join Date:
Apr 2007
Posts:
12
Plugin Contributions:
0

Re: Centering the Add to Cart button

10west:

try float: middle, instead of commenting it out

No such thing as float: middle? Anyways, I tried it and float:center but they both do not work. I'm guessing I need to add some invisible boxes on the right and left side of the Add to Cart button to make it float properly without stretching.

Other thoughts out there? If I figure something out on my own I'll update...

29 Jun 2010, 1:56 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Centering the Add to Cart button

Float can only be left, right or none. Floated divs automatically shrink to just fit their content width, so if you remove the float, you need to explicitly set the element width if you do not want it 100% width. No invisible boxes are needed; margin: auto; will give the element equal left and right margins, centering it.