Immagine centrata anche in verticale

Printable View

11-01-2003, 18.58.38
ephestione

Devo inserire un'immagine completamente centrata in una pagina: farlo orizzontalmente è facile, visto che è sufficiente usare un <center> o un <div align="center">, ma il centramento verticale non lo è altrettanto... si può sfruttare il centramento su entrambi gli assi del contenuto di una tabella che abbia dimensioni "100%" sia in orizzontale che in verticale, ma il problema è che in Mozilla, se viene accettato "100%" come dimensione orizzontale, il "100%" viene scartato se usato anche per la dimensione verticale, e l'immagine quindi viene inserita nella parte più alta della pagina.
Ci sono altre soluzioni?
11-01-2003, 19.54.28
Certo: Mozilla avendo il pieno supporto allo standard w3c, non prende in considerazione l'argomento height dei tag table:tr:td
Come fare:
Se l'immagine è solo uno sfondo, caricarlo così:
- <body style="background-image: URL(immagine.jpg); background-position: center">
e viene visualizzata al centro, in qualsiasi risoluzione e/o dimensione della pagina.
Se invece è parte del contesto della pagina, allora:
[code:1:3155fe2b6f]
<html>
<head>
<style type="text/css">
.image {
background-image: URL(baby.jpg);
background-position: center;
background-repeat: no-repeat;
}
table {
height: 100%;
width: 100%;
border: 0px;
}
</style>
</head>
<body style="margin: 0 0 0 0">
<table>
<tr>
<td class="image"></td>
</tr>
</table>
</body>
</html>
[/code:1:3155fe2b6f]

E risolvi :D
11-01-2003, 21.05.07
ephestione

Complimenti per la prolificità col codice :-)
Però a occhio non potrò usarlo nel mio caso, e, mea culpa, perché non ho specificato meglio la richiesta: avrai sicuramente presente il sito di analogx, ebbene ciò che voglio fare io è un index.htm su quel tipo, in cui l'immagine sia all'interno di un <A>, e perfettamente centrata nella pagina.
Alla fine dovrò accontentarmi di qualche <BR> prima dell'immagine.... sigh

Grazie comunque
11-01-2003, 21.26.17

tutto qui:

Citazione:

<html>
<head>
<style type="text/css">
.image {
background-image: URL(baby.jpg);
background-position: center;
background-repeat: no-repeat;
}
table {
height: 100%;
width: 100%;
border: 0px;
}
</style>
</head>
<body style="margin: 0 0 0 0">
<table>
<tr>
<td>
<a class="image" href="dove vuoi che andiamo oggi?">&nbsp</a>
</td>
</tr>
</table>
</body>
</html>

Saper usare i CSS 8)
11-01-2003, 21.38.25
Evcz

hai provato a mettere dentro il layer (div) una tabella 1x1 e centrare il contenuto della colonna così:

[code:1:d0c064d12c]<td align="center" valign="middle">
</td>
[/code:1:d0c064d12c]

byez
11-01-2003, 21.54.49

Quel sistema funziona finchè la pagina non viene ridimensionata sotto le dimensioni della foto, poi la centratura va a farsi benedire.
Certo se l'immagine è molto piccola, chi vuoi che riduca una pagina sotto i 200 pixel di margine?
Comunque, essendo libero ognuno di fare come gli pare, almeno a casa sua, mi pare che la tua soluzione, vada bene per quasi tutti i casi.
Ciao. :)
11-01-2003, 22.28.53
ephestione

Ahh ma allora tutto il problema formale sta nella definizione di height nei tag <table> <tr> <td>, mentre se l'attributo height è modificato da un CSS posso impostarlo a 100% anche in verticale senza incorrere nello stesso problema?

Allora provo
...domattina quando ho più voglia
[viva la pigrizia]
11-01-2003, 23.07.51

Esatto!
15-06-2008, 17.06.48

Non basta provare tipo... Chessòio un CSS così?

Vertical-align: middle;
15-06-2008, 17.11.45
darkwolf

È una discussione del 2003 :roll:
15-06-2008, 17.15.14

Chiedo perdono. Non avevo letto la data.

Immagine centrata *anche* in verticale

Immagine centrata anche in verticale