centrare immagine contenuta dentro un elemento <li>

[blekm]

html



<ul class='galleria-fotografica'>

<a href="immagini-strutture/2_1.jpg" rel="thumbnail">
immagini-strutture/2_1thumb.jpg</a>


<a href="immagini-strutture/2_2.jpg" rel="thumbnail">
immagini-strutture/2_2thumb.jpg</a>


<a href="immagini-strutture/2_3.jpg" rel="thumbnail">
immagini-strutture/2_3thumb.jpg</a>


<a href="immagini-strutture/2_4.jpg" rel="thumbnail">
immagini-strutture/2_4thumb.jpg</a>


[/list]


css


.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 ?

[fcaldera]

la soluzione più semplice può essere quella di mettere le immagini come sfondi delgli elementi <a> all'interno delle tue liste, in questo modo potrai centrarle con la proprietà background-position

[blekm]

Originariamente inviato da fcaldera
la soluzione più semplice può essere quella di mettere le immagini come sfondi delgli elementi <a> all'interno delle tue liste, in questo modo potrai centrarle con la proprietà background-position

un esempio col mio codice?

ho il problema che deve essere un codice universale, forse dovrei scrivere codice css dentro la pagina html, le foto vengono pescate da una cartella

[blekm]

per ora ho risolto cosi, centrando verticalmente. Ma non riesco a centrare orizontalmente.



<ul class='galleria-fotografica'>
<div class="f">
<a href="immagini-strutture/2_1.jpg" rel="thumbnail">
immagini-strutture/2_1thumb.jpg</a>
</div>


<div class="f">
<a href="immagini-strutture/2_2.jpg" rel="thumbnail">
immagini-strutture/2_2thumb.jpg</a>
</div>


<div class="f">
<a href="immagini-strutture/2_3.jpg" rel="thumbnail">
immagini-strutture/2_3thumb.jpg</a>
</div>


<div class="f">
<a href="immagini-strutture/2_4.jpg" rel="thumbnail">
immagini-strutture/2_4thumb.jpg</a>
</div>


[/list]


.f
{
width: 80px;
height: 60px;
}

.f img
{
margin: 0 auto;
text-align: center;
display: block;
}


mi farebbe comodo una soluzione senza bisogno di impostare background tramite css. E ovviamente che funzioni su IE. Io ora sto provando su FF per mac.

[blekm]

up

edit: ho risolto cosi, usando un'altra discussione dove H5N1_Aviaria mi ha risolto il problema

http://forum.html.it/forum/showthread.php?s=&threadid=1195640



<ul class='galleria-fotografica'>

[/url]


[url="immagini-strutture/2_2.jpg"] (immagini-strutture/2_1.jpg)

...
...
...
[/list]


dove style=... me lo costruisco in maniera interattiva con php.



a.gallery
{
text-decoration: none;
border: 1px solid red;
width: 80px;
height: 60px;
float: left;
cursor: pointer;
}

.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: 1px solid silver;
padding: 2px;
}

.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;
}

.galleria-fotografica li img
{
margin: 0 auto;
text-align: center;
}

[blekm]

l'allegato per farvi vedere che funziona praticamente in qualsiasi caso. Speriamo solo che IE non faccia come gli pare, sennò uccido qualcuno.