• M
    User Attivo •

    Centrare orizzontalmente gli elementi di una galleria fotografica con CSS

    A tutti un saluto,
    ho fatto una pagina con una serie di gallerie fotografiche con didascalie mediante i CSS in cui le righe sono composte da 5 colonne (una per foto) cercando di centrarle rispetto ai bordi verticali. La porzione di codice è questa:

    
*  { padding: 0; margin: 0; }
#gallery {width: 100%; overflow: auto; font-size: 16px; margin-bottom:30px; line-height:1em; text-align: center; }
 dl{float: left;width: 140px;height: 205px; border: 1px solid #dadada; margin: 30px 5px 0 5px;/*text-align: center;*/ }

#titolo { text-align: center; }

    Ed il codice xhtml di una galleria è il seguente (se fosse necessario posterò l'intero codice della pagina):

    
<div id="gallery"><div id="titolo">
    <p><a href="index.html">Homepage</a>&nbsp;Vasi e lampade&nbsp;<a href="gallerie.html">Torna all'indice delle gallerie</a></p>
</div>

<dl><dt><a href="images/d/A1.JPG"><img src="images/p/A1.JPG" alt="" /></a></dt><dd><p>didascalia 1</p></dd></dl>
<dl><dt><a href="images/d/A2.JPG"><img src="images/p/A2.JPG" alt="" /></a></dt><dd><p>didascalia 2</p></dd></dl>
<dl><dt><a href="images/d/A3.JPG"><img src="images/p/A3.JPG" alt="" /></a></dt><dd><p>didascalia 3</p></dd></dl>
<dl><dt><a href="images/d/A4.JPG"><img src="images/p/A4.JPG" alt="" /></a></dt><dd><p>didascalia 4</p></dd></dl>
<dl><dt><a href="images/d/A5.JPG"><img src="images/p/A5.JPG" alt="" /></a></dt><dd><p>didascalia 5</p></dd></dl>
<dl><dt><a href="images/d/A6.JPG"><img src="images/p/A6.JPG" alt="" /></a></dt><dd><p>didascalia 6</p></dd></dl>
<dl><dt><a href="images/d/A7.JPG"><img src="images/p/A7.JPG" alt="" /></a></dt><dd><p>didascalia 7</p></dd></dl>
</div>

    Con FF, Opera e Safari disponeva tutte e 5 le foto per riga, ma visualizzandolo con il pc di un amico che ha MSIE 8 disponeva solo 4.
    Ho quindi cambiato margin in dl "margin: 30px 4px 0 4px;" ed anche con quel browser tornava la quinta colonna, anche con MSIE 6 installato sul mio pc.
    Tuttavia aprendola con FF ho notato che non erano più centrate. Ho cercato di combattere con "text-align: center;" letto in diversi articoli/post ma per ora senza successo.

    Volevo cortesemente chiedere se ci fosse un modo per centrarle orizzontalmente anche dai bordi verticali in maniera tale che l'effetto sia visibile almeno su quei browser.
    Ringrazio per le informazioni.

    0
Effettua l'accesso per rispondere