centrare una immagine in un div sia verticalmente che orizzontalmente

[pendolino4ever]

e' una semplice immagine .jpg che deve essere centrata tutto qui.Forse non riesco a capire cosa vuoi chiedermi

[pierofix]

Sto cercando di chiederti che scopo ha quell'immagine. Vedi, la nuova filosofia di progettazione (se così vogliamo chiamarla), oltre agli aspetti tecnici cerca di portare una nuova sensibilizzazione, incentrata ad abbandonare il qualunquismo (inteso come attenzione alle cose) verso uno studio semplice ed intelligente del messaggio da pubblicare sul web.

In parole povere, se è un abbellimento c'è poco da fare: lo metti come sfondo e lo gestisci tramite css (come tutti gli abbellimenti e la grafica in genere). Questo ovviamente inserendo il titolo come testo nell'html. Poi con i css puoi farlo magicamente scomparire e rimpiazzarlo con una affascinantissima immagine, ma ciò che conta è sia comunque presente nel documento.

Le linee guida sull'accessibilità del w3c dicono che ogni documento dovrebbe essere navigabile e comprensibile anche eliminando TUTTI gli elementi grafici. Questo comporta ovviamente una costruzione solida ed intelligente del documento alla base.

[pendolino4ever]

sicuramente
non voglio che quella immagine sia considerata nello sfondo ma voglio che sia inserita nella "tabella" come se inserissi una semplice scritta

[pierofix]

Scusa eh, ma allora non ci capiamo. Se quell'immagine non fa parte integrante del documento ma è solo un abbellimento, un fronzolo, un di più, allora occorre usare il metodo di replace css, in cui nel markup compare il titolo testuale che viene poi nascosto, e al suo posto appare una sfavillante immagine luminosa.

Questo è molto importante: prova a pensare che il web dovrebbe essere un posto democratico, in cui TUTTI indistintamente - persone disabili comprese - dovrebbero avere accesso indistinto alle informazioni pubblicate.

Ora, non so se sai dell'esistenza di browser per persone non vedenti: questi, chiamati screen-reader, leggono ad alta voce il contenuto delle pagine, rendendole quindi comprensibili a chi non può vedere.

Ora, prova a pensare: tu nel documento metti un'immagine al posto del titolo; come pensi che questa possa essere compresa da un non vedente?

Potresti inserire un attributo alt (testo alternativo) all'immagine, ma nel tuo caso specifico non avrebbe senso, in quanto esiste una tecnica molto più intelligente e logica (image replacement in css).

Capito? Occorre questo tipo di sensibilità al web del futuro, ed è compito nostro adottarla e diffonderla.

[pacovox]

Potresti inserire un attributo alt (testo alternativo) all'immagine, ma nel tuo caso specifico non avrebbe senso, in quanto esiste una tecnica molto più intelligente e logica (image replacement in css).

Quale? Quella che vedo usare molto spesso non è molto accessibile, sicuramente meno di un'immagine in linea con un alt corretto.

[andrea.paiola]

Originariamente inviato da pacovox
Quale? Quella che vedo usare molto spesso non è molto accessibile, sicuramente meno di un'immagine in linea con un alt corretto.

penso che piero intenda che, se un'immagine non fa parte dei contenuti (ossia è un di +) la metti come sfondo nei CSS...
nel caso particolare l'immagine andrebbe a sostituire un titolo (poniamo il titolo principale per esempio: quindi h1) che, sempre tramite CSS, andrebbe fatto scomparire (display: none) e al suo posto metti l'immagine di cui sopra.
Ora: non so se il titolo risulterà accessibile tramite screen reader anche se è stato reso invisibile tramite CSS... tu lo sai?

[pendolino4ever]

mmmmmm no

[andrea.paiola]

Originariamente inviato da pendolino4ever
mmmmmm no

non lo sai o non è accessibile?

[pendolino4ever]

non lo so

[awd]

:maLOL:
pendolino con questi due qui non ne esci più!!

facciamo così, io ti do la soluzione tecnica al tuo problema, poi sta a te valutare tutte le implicazioni aggiuntive che ti sono state spiegate!

devi usare il posizionamento assoluto, quindi al div contenitore dovrai settare un position: relative;

#contenitore {
	width: 100%;
	height: 100%;
	position: relative;
}

#immagine {
	width: 300px;
	height: 200px;
	position: absolute;
	top: 50%; /* posizioni a metà del contenitore */
	left: 50%; /* posizioni a metà del contenitore */
	margin-top: -100px; /*metà dell'altezza dell'immagine*/
	margin-left: -150px; /*metà della larghezza dell'immagine*/
}

ecco poi modifichi e aggiungi le proprietà che ti interessano