html
codice:
<ul class='galleria-fotografica'>
[*]<a href="immagini-strutture/2_1.jpg" rel="thumbnail">
[img]immagini-strutture/2_1thumb.jpg[/img]</a>
[*]<a href="immagini-strutture/2_2.jpg" rel="thumbnail">
[img]immagini-strutture/2_2thumb.jpg[/img]</a>
[*]<a href="immagini-strutture/2_3.jpg" rel="thumbnail">
[img]immagini-strutture/2_3thumb.jpg[/img]</a>
[*]<a href="immagini-strutture/2_4.jpg" rel="thumbnail">
[img]immagini-strutture/2_4thumb.jpg[/img]</a>
[/list]
css
codice:
.galleria-fotografica
{
width: 230px;
height: 420px;
float: left;
margin: 0;
padding-top: 60px;
padding-left: 10px;
}
.galleria-fotografica a
{
cursor: pointer;
}
.galleria-fotografica img
{
background-color: white;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 80px;
height: 60px;
}
.galleria-fotografica li
{
background-color: white;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 10px;
position: relative;
cursor: pointer;
}
come centrare l'immagine dentro l'elemento[*]? Il mio box li è di 80x60, e le immagini dentro sono più piccole, ma non sempre 80x60. Possono essere 80x40 o 45*60. Come centrarle sempre, indipendentemente dalle dimensioni? Col codice di sopra mi riempiono tutto il contenuto, sgranando l'immagine.
Forse dovrei usare i div invece della galleria con <ul> e[*]?