Allineamento verticale

[freank]

salve,
ho già letto le risposte che avete dato qui e ho letto tantissime guide su internet.
Ma nulla.
Sembra proprio che non voglia andare.
Sto provando ad allineare delle immagini all'interno delle div... ma nulla...
la mia situazione attuale è questa :
lato css :

.lastgame{    width: 160px;    height: 120px;    margin-top: 6px;    margin-right: 8px;    margin-left: 6px;    background-color: black;    text-align:center;    float: left;}.imglast{max-width: 100%;max-height: 100%;}

sulla pagina html invece :

<div>
<div class="lastgame"><a href="http://blablabla"><img class="imglast" src="Games/blablabla.jpg"  /></a></div></div>

ho inserito un background-color e un max-width e height in modo tale che l'immagine, se non dovesse essere della grandezza del div, escono i bordi neri affianco.
Potete vedere praticamente il sito qui : http://freankexpo.net nella home, sotto la voce lastgames

[freank]

nessuna idea ?

[cip999]

Scusa, ma sinceramente non capisco quale sia il tuo problema... Vuoi forse un allineamento verticale delle immagini all'interno del div?
Prova così, anche se non ti garantisco nulla...

.lastgame {
           float: left;
           display: table-cell;
           width: 160px;
           height: 120px;
           margin: 6px 8px 6px 0;
           background-color: black;
           text-align: center;
           vertical-align: middle;
          }

La classe .imglast e l'HTML puoi lasciarli invariati...
Fammi sapere.

[freank]

Ho già provato ma niente >.<
Anche mettendo,oltre a quello suggerito da te, display : table; bel div precedente che conteneva .lastgame ...

[cip999]

Sicuro? Che browser usi per i test?
L'altra volta andavo di fretta e non ho avuto tempo per provarlo in locale, ora che l'ho fatto ho apportato qualche leggera modifica al codice. Ecco qui (#container ho assunto che sia l'id del div contenitore):

#container {
                 display: table;
                 table-layout: fixed;
                 margin: 10px;
                 border: 1px solid #F00;
                 border-collapse: separate;
                 border-spacing: 3px;
                }
.lastgame {
               display: table-cell;
               width: 160px; height: 120px;
               background-color: #000;
               color: white;
               text-align: center;
               vertical-align: middle;
              }
.imglast {
            max-width: 160px; max-height: 120px;
           }

E questa è una screenshot del risultato (testato con Firefox):
screenshot.jpg
Naturalmente il layout te lo personalizzi come meglio credi, i bordi, margini e sfondo che ho impostato io sono solo indicativi...

[freank]

non riesco proprio a capire.
Ho fatto le tue modifiche... ma continua a non comparire nella maniera corretta !
Eppure appena ho visto il tuo screen sono rimasto a bocca aperta...
Avevo infatti già provato con il metodo "table+vertigal-alig" ma niente...

Puoi controllare anche la sorgente... ho fatto le modifiche che mi hai suggerito... ma non cambia...
( .imglast l'ho lasciato con 100% (perchè sto entrando in fissa con il rendere il sito per mobile, ma ho visto che anche mettendo i valori in px non cambia...)
il #container corrisponde a #LastGames

[cip999]

I valori di width e height per .imglast li ho messi in pixel perché con la percentuale, non so per quale motivo, mi ridimensionava ugualmente la cella in larghezza quando l'immagine era più larga...

Comunque, gli elementi flottanti vengono resi automaticamente block-level: è la stessa cosa che succede ai tuoi .lastgames che, nonostante siano settati su display: table-cell, con la proprietà float: left tornano ad essere dei normali, comunissimi div. E così addio allineamento verticale.
Le td in ogni caso non necessitano di float, dato che sono già di per sé disposte orizzontalmente. Una volta eliminato, ricordati che il margin impostato in precedenza non ha effetto sulle table-cell, ma devi applicare la proprietà border-spacing a #LastGames.

Spero vada bene stavolta...

[freank]

ah ! Finalmente ! Era quel tanto amato e odiato float !
Grazie !
Il togliere questi float però non mi potrebbe dar problemi se prossimamente vorrei trasformare il sito per mobile ? (e quindi rendere i vari div floattanti ?)
Devo per forza usare td e tr da ora in poi ?

.. e pensare che un paio di anni fa mi costrinsero a levare tutte le table perchè erano ormai in disuso e totalmente sostituite dai div e i suoi float

[freank]

risolto !