Beelden uit Gallery Cycle centreren in DIV ?

[myleen99]

Op de homepage draait een beeldcarousel uit Gallery Cycle. Die beelden zijn nu links uitgelijnd, doch die willen we graag gecentreerd zien. We hebben al allerlei HTML en CSS truuks en settings geprobeerd, doch ze blijven links staan. Hoe lossen we dat op ?

Hieronder de huidige settings :
CMSMS 1.11.4 ; Gallery 1.6

Gebruikte Cycle 1.13 template (genoemd "cc_cycle")

Code: Select all

<div id="gallery_wrapper">
    <div id="slides">
        {foreach from=$images item=image}
        	{if !$image->isdir}
          		<img src="{$image->file}" alt="{$image->titlename}" />
        	{/if}
        {/foreach}
    </div>
</div>

Gebruikte Cycle 1.13 CSS

Code: Select all

/* height and width should be the same as the original file sizes */

#gallery_wrapper {
    width: 800px;
    height: 470px;
    padding: 10px;
    text-align: center;
    margin: 5px; /* 0 auto; -> position centered on page */
    border: solid 1px #826D48;
    -moz-border-radius: 10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari, Chrome */
	-ms-border-radius: 10px; /*Microsoft*/
	-o-border-radius: 10px; /*Opera*/
	border-radius: 10px; /* CSS3 */
}

#slides {text-align: center;}

#slides img {
    border: none;
    margin-left: auto;
    margin-right: auto;
}

Opmerking : wanneer we in de #gallery_wrapper de setting
margin: 5px;
vervangen door
margin: 0 auto;
dan blijven de beelden nog steeds links staan , doch de omlijning van de wrapper verdwijnt.

De beeldcaroussel wordt aangeroepen in het page content blok #main , welke via een DIV gecentreerd wordt op de pagina.

Code: Select all

{Gallery dir='2013' template="cc_cycle"}

Dank bij voorbaat. Dirk

[deactivated010521]

----------

[myleen99]

@Arnoud.
Hartelijk dank voor de snelle reactie !
Ik heb mijn onderstaande CSS code aangepast en in de http://jsfiddle.net/jP8Yu/ getest. Daar werkt alles goed, doch op mijn site niet. Waarschijnlijk wordt de CSS niet goed gelezen of is er ergens een CSS conflict waardoor de gallery CSS wordt overschreven.

Code: Select all

/* height and width should be the same as the original file sizes */

#gallery_wrapper {
    width: 800px;
    height: 470px;
    padding: 10px;
    text-align: center;
    margin: 5px ; /*0 auto; -> position centered on page */
    border: solid 1px #826D48;
    -moz-border-radius: 10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari, Chrome */
	-ms-border-radius: 10px; /*Microsoft*/
	-o-border-radius: 10px; /*Opera*/
	border-radius: 10px; /* CSS3 */
}

#slides {text-align: center;}

#slides img {
    display:block;
    margin:0 auto;
    border: none;
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
	-ms-border-radius: 10px; /*Microsoft*/
	-o-border-radius: 10px; /*Opera*/
	border-radius: 10px; /* CSS3 */
}