How to center images in the footer

I have problems with centering the images in the footer ( the Visa / MC images ) When i use the <p align="center"> it breaks up so there is to much space over and under the images, but it does center it.

But I want to center it without getting the empty space over and under the images.

Will be verry happy for any help :hug:

The <p> tag includes big margins above and below it. You will get better results by using
<br /><span id="ccFooterLogo"> your image code </span><br />

and add to your stylesheet

#ccFooterLogo { 
    margin: auto;
    }

Thanks for your input. But i dont get it to work...

Maby I did misunderstand something, so i will put the code here so you can see.

<span id="ccFooterLogo">
<a href="http://www.cardia.no">
<img src="images/cc_logos/logo_cardia.gif" center></a>
<a href="http://www.visa.no">
<img src="images/cc_logos/thumb_visa_741a.gif"></a>
<a href="http://www.visa.no">
<img src="images/cc_logos/thumb_vbv_745a.gif"></a>
<a href="http://www.mastercard.no">
<img src="images/cc_logos/thumb_mastercard_742a.gif"></a>
<a href="http://www.mastercard.no">
<img src="images/cc_logos/thumb_mcsecurecode_746a.gif"></a>
</span>

It dosent center wit this code.

Putting a "center" tag in one image will not make the group center. Did you edit your stylesheet (/includes/templates/your_template/css/stylesheet.css) and add this?

#ccFooterLogo { 
    margin: auto;
    }

Here is the last part of the css file :

#upProductsHeading {
 text-align: left;
 }
#upDateHeading {
 text-align: right;
 }
/* categories box parent and child categories */
A.category-top, A.category-top:visited {
 color: #008000;
 text-decoration: none;
 }
A.category-links, A.category-links:visited {
 color: #879B00;
 text-decoration: none;
 }
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
 color: #FF0000;
 text-decoration: none;
 }
SPAN.category-subs-parent {
 font-weight: bold;
 }
SPAN.category-subs-selected {
 font-weight: bold;
 }
/* end categories box links */
/*misc*/
.back {
 float: left;
 }
.forward, #shoppingCartDefault #PPECbutton {
 float: right;
 }
.bold {
 font-weight: bold;
 }
.rowOdd {
 background-color: #E8E8E8;
 height: 1.5em;
 vertical-align: top;
 }
.rowEven {
 background-color: #F0F0F0;
 height: 1.5em;
 vertical-align: top;
 }
.hiddenField {
 display: none;
}
.visibleField {
 display: inline;
}
CAPTION {
 /*display: none;*/
 }
#myAccountGen li, #myAccountNotify li {
 margin: 0;
 } 
.accountTotalDisplay, .accountTaxDisplay {
 width: 20%;
 text-align: right;
 /*vertical-align: top*/
 }
.accountQuantityDisplay {
 width: 10%;
 vertical-align: top
 }
TR.tableHeading {
 background-color: #cacaca;
 height: 2em;
 }
.productListing-rowheading {
 background-color: #abbbd3;
 background-image: url(../images/tile_back.gif);
 height: 2em;
 color: #FFFFFF;
 }
#siteMapList {
 width: 90%;
 float: right;
 }
.ratingRow {
 margin: 1em 0em 1.5em 0em;
 }
LABEL#textAreaReviews {
 font-weight: normal;
 margin: 1em 0em;
 }
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
 background-color: #ffffff;
 }
 
#ccFooterLogo { 
    margin: auto;
    }

So i dont know why it dosent make the images centered

Try adding

text-align: center;

to #ccFooterLogo.

In the stylesheet?

like this?

#ccFooterLogo {   
text-align: center;    
margin: auto;
    }

Dident work....

The <span> needs to be a <div> for this to work. Then, text-align: center; does the job (and margin: auto; is not needed).

:clap::clap::clap: THANK YOU!!! It looks GREAT :clap::clap::clap:

[QUOTE=RonnyB;436108]Thanks for your input. But i dont get it to work...

Maby I did misunderstand something, so i will put the code here so you can see.

<span id="ccFooterLogo">
<a href="http://www.cardia.no">
<img src="images/cc_logos/logo_cardia.gif" center></a>
<a href="http://www.visa.no">
<img src="images/cc_logos/thumb_visa_741a.gif"></a>
<a href="http://www.visa.no">
<img src="images/cc_logos/thumb_vbv_745a.gif"></a>
<a href="http://www.mastercard.no">
<img src="images/cc_logos/thumb_mastercard_742a.gif"></a>
<a href="http://www.mastercard.no">
<img src="images/cc_logos/thumb_mcsecurecode_746a.gif"></a>
</span>

QUOTE]

Is this information entered in (/includes/templates/your_template/css/stylesheet.css ?

How does it looks in working version.

#ccFooterLogo {
margin: auto;
}

I would appreciate if you will share working code.

Ok, I could finaly do it too.

Here are final codes:

/public_html/store/includes/templates/your_template/common/tpl_footer.php

added lines are in red:

**<div id="ccFooterLogo">
<img src="http://your_site.com/store/includes/templates/your_template/images/icons/cc1.gif" alt="We accept major credit cards and PayPal">
<img src="http://your_site.com/store/includes/templates/your_template/images/icons/cc2.gif" alt="We accept major credit cards and PayPal">

/public_html/store/includes/templates/your_template/css/stylesheet.css

added lines are in red:

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
#ccFooterLogo {
text-align: center;
}

Result is looking like: