Come diceva Laburno per centrare automaticamente un oggetto all'interno di un altro devi dare al genitore ( prendi il div) una dimensione fissa e al figlio un margine scritto così:

div#genitore{
width:500px;
height:200px;
}
div#figlio{
margin:0 auto;
}

Diciamo che questo è uno dei metodi per farlo.
Il text-align:center però è un attributo che spesso e volentieri devi usare per la compatibilità con internet Explorer (aimè) dato che posiziona centralmente anche gli oggetti come le immagini ( tu dirai ma che c'entra il TEXT-align ? bè chiedilo agli incapaci della microsoft XD )

L'effetto hover del cambio bordo sull'immagine ora non sono sicuro, ma su internet explorer potrebbe dare dei problemi

Grazie karedas, come posso provo la storia del contenitore centrato. Io per ora ho risolto dando al contenitore margin left e right = auto e mi funziona sia su IE che con Firefox e Opera.

Per il bordino, non ne vengo a capo, so solo che se creo una tabella e metto l'immagine in una cella funziona, ma avendo creato il sito table free non posso più esare la tabellina per inserire quell'immagine. Almeno credo!

Ho fatto qualche prova, e ho visto che per Firefox e Opera non serve che metto la classe, e align="right" lo prende tranquillamente e il W3C me lo convalida.

Però il problema è invece che su IE il bordo non è verde e non si vede il cambio di colore al passaggio del mouse. Praticamente tiene i colori di base impostati da IE il classico blu per il link e il violaceo per il visitato.

Ragazzi io ho trovato queste istruzioni per il bordo intorno alle immagini.

[HTML]a{
border: 0 !important;
border: 1px solid red;
}

a:hover{
border: 1px solid blue;
}

img{
border: 1px solid red !important;
border: 0;
}

img:hover{
border: 1px solid blue !important;
}[/HTML]

Fonte

Funziona, però io non devo applicarlo a tutti i link ma solo ad alcune immagini, e oltretutto così facendo tutte le immagini mi vengono bordate e cambiano colore al passaggio del mouse anche se non sono link!

E ovviamente se allineo a destra o sinistra, non mi funge più! (:x

Prova ad annidiare le img dentro gli a:

a img { .....}
a:hover img { .... }

Leggendo che su IE ti mantiene i valori di default mi è venuto in mente che potresti prima resettarli con img { border: 0 } e poi definire gli stili dei link.

Gli !important su IE6 non servono perché mi sembra che non li riconosca.

Si ma in questo modo

a img { .....}
a:hover img { .... }

tutte le immagini della pagina mi si contornano no?
Io ne ho pochissime che fungono da link.

Si devi aggiungerci la tua classe, non l'avevo specificato.

Niente, non ne vengo a capo, sicuramente sono io tonta, ma non mi riesce proprio!!
Finisce che non dovrò avere il bordino colorato intorno all'immagine, o meglio colorato fisso senza cambio di colore. Però mi fa rabbia!

Prova così:
a.classe { border: 1px solid COLORE1 }
a.classe:hover { border: 1px solid COLORE2 }
a img { border: 0; }

Corro a provare, ho fatto qualcosa di simile stanotte ma non mi veniva niente di buono, spero fosse sbagliato.

Ho provato e ho aggiornato la pagina di prova. Funge con IE ma non con Firefox. E poi resterebbe il problema dell'allineamento.

Sembra un odissea!

Ri-prova così:
a.classe { border: 1px solid COLORE1 }
a.classe:hover { border: 1px solid COLORE2 }
img { border: 0; } /* toglie i bordi da tutte le immagini, i bordi saranno dei link */

Per quanto riguarda l'allineamento all'immagine interessata applica un float (left o right) dove lo vuoi te.

Css

[html]a.provalink { border: 1px solid green; }
a.provalink:hover { border: 1px solid red; }
img { border: 0; } /* toglie i bordi da tutte le immagini, i bordi saranno dei link */[/html]

Pagina:

[html]<a href="news-annecy.jpg" class="provalink" target="_blank"><img src="news-annecyP.jpg" alt="" border=""></a>[/html]

Con o senza border="" il risultato è uguale.

La pagina di prova è il risultato, IE ok, Firefox no! Dove sbaglio?! :():

Sul tag non devi specificare attributi presentazionali come border, ma lasciarli completamente in gestione ai CSS.

Comunque è un piccolo bug di IE6 (sul 7 funziona normale), come diceva karedas, ho fatto una ricerca ed ho trovato questo:
http://locusoptimus.com/css-trickery/ie-image-border-styles-on-hover.php

Quindi ho riprovato così:

img { border: 0; }
a:hover{ color: #FF0000; }
a:link img { border: 1px solid #000; }
a:hover img { border: 1px solid; }

[html]<a href="#"><img src="#" alt=bla" /></a>[/html]

Ora sono cotta di sonno, guardo tutto bene stanotte. GRAZIE!

Ma ad occhio, incorro sempre nel problema che poi tutte le immagini della pagina mi vengono bordate, metto le classi???

Scusa come non detto, ho fatto una domanda stupida!

Ho provato e funziona. Ho aggiornato la pagina di prova!

Grazie mille Laburno, funziona anche se allineo a destra o sinistra. EVVIVA!!

Mi resta un unico problema e cioè che se disgraziatamente ho delle immagini da usare come link su cui non voglio il bordo, non ho idea di come fare! Tu?

Ps: non uccidermi!!

@Vampiretta said:

Mi resta un unico problema e cioè che se disgraziatamente ho delle immagini da usare come link su cui non voglio il bordo, non ho idea di come fare! Tu?

Utilizzi una classe. O meglio, consiglio mio, utilizza una classe solo per le immagini per cui vuoi che appaia il bordo.

Fatto Laburno, si lo sto usando con un classe solo sulle immagini che mi interessano!!

Non so come ringraziarti...

Risolto tutto? =D

Si si, a me funziona con IE, Firefox e Opera e sia con l'immagine senza allineatura, che allineata a destra o sinistra.

Ho scritto così:

[html]a.border:link img, a.border:visited img { border: 1px solid green; }
a.border:hover img, a.border:active img { border: 1px solid #B60022;}[/html]

E messa la classe al link:

[html]<a href="Screen5.jpg" target="_blank" class="border">[/html]

E dove mi serve, la classe all'immagine con float a destra o sinistra.