Ciao a tutti
facilissimo centrare un'immagine in una cella di una tabella posizionandola in maniera assoluta dopo aver settato il position della cella in maniera relative.
img
{
height: 400px;
width:800px;
position: absolute;
left:50%;
top: 50%;
margin-left:-400px;
margin-top:-200px;
}
Ma se non abbiamo le dimensioni dell'immagine e si debba centrare tutte le immagini di qualsiasi dimensioni siano?
Inoltre la centratura su dispositivi android non è esatta
Grazie
Ciao, prova semplicemente così:
codice:td>img { display: block; margin: 0 auto; }
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ma così è solo orizzontalmente! Credo che lui voglia verticale e orizzontaleOriginariamente inviata da KillerWorm
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Carlo, se hai una diversa soluzione da consigliare è sicuramente bene accetta.
Non voglio assolutamente essere scortese ma, perdonami se te lo dico: a meno che tu non abbia provato la soluzione che ho proposto e abbia appurato che non si allinea anche in verticale, il tuo intervento così mi pare non abbia alcun valore.
Sul mio precedente post ho risposto di fretta e non ho aggiunto troppi dettagli, mi sono limitato a fornire semplicemente una soluzione.
Per meglio chiarire posso specificare che sugli elementi <td>, la proprietà valign ha il valore middle di default, per cui basta forzare l'allineamento orizzontale dell'immagine. A meno che non siano applicate diverse altre regole sul <td> o sull'immagine, che influiscano su tale allineamento verticale preimpostato, allora credo possa bastare ciò che ho consigliato.
Un esempio concreto:
Qualunque sia la dimensione dell'immagine, sarà centrata sia orizzontalmente sia verticalmente dentro la cella. Aggiungo, se l'immagine è più grande della cella stessa è chiaro che la cella si estenderà in base al contenuto, come da suo normale comportamento.codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> td { width: 800px; height: 404px; background: grey; border: 1px solid black; } td>img { display: block; margin: 0 auto; } </style> </head> <body> <table> <tr> <td> <img src="image.jpg" alt=""> </td> </tr> </table> </body> </html>
Mi scuso se nel precedente post non sono stato troppo chiaro
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
No! Nessuna altra soluzione da proporre e mi scuso io, avevo letto il post frettolosamente e non avevo considerato che era una tabellaCarlo, se hai una diversa soluzione da consigliare .......................
Mi scuso se nel precedente post non sono stato troppo chiaro
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Permessi di invio
Rispondi quotando