centrare immagine con css

yabeforg

centrare immagine con css

in internet ho trovato questo codice. Sembra semplicissimo, basta sostituire il testo con l'immagine..... solo che risulta sempre spostata e mai centrata, perchè?

<html>
<head>
<title></title>
<style type=?text/css?>
<!?
body {
font-family:  Arial;
font-size: 18px;
}
#boxcentrato {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 340px;
height: 240px;
margin: auto;
border: 1px solid #333;
}
?>
</style>
<!?[if IE]>
<style type=?text/css?>{
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -120px;
}
</style>
<![endif]?>
</head>
<body>
<div id=?boxcentrato?>Testo centrato</div>
</body>
</html>

yabeforg

help!!!!

yabeforg

per favore, qualcuno?

marcocarrieri

Dove intendi centrare il tutto?
Al centro della pagina?
E se ci sono altri contenuti?

yabeforg

@marcocarrieri said:

Dove intendi centrare il tutto?
Al centro della pagina?
E se ci sono altri contenuti?

no, mi interessa centrare solo una immagine nel centro della pagina, puoi aiutarmi?

marcocarrieri

Ok provo a scrivere del codice se non adesso, stasera visto che son al lavoro.
Saluti intanto.

eternity

Una volta mi è capitato di non riuscire ad elaborare un codice perchè sbagliavo le virgolette ovvero queste ” al posto di queste " spero che tu non abbia fatto lo stesso errore.

Ciao

eternity

Una volta mi è capitato di non riuscire ad elaborare un codice perchè sbagliavo le virgolette ovvero queste ? al posto di queste " spero che tu non abbia fatto lo stesso errore.

Ciao

eternity

Scusate, l'ho inserito doppio

marcocarrieri

Prova a vedere se questo codice ti può andare.

[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
}
#divcentrato
{
position:absolute;
top:50%;
left:50%;
width:193px;
height:50px;
margin-left:-96px;
margin-top:-25px;
}
</style>
</head>
<body>
<div id="divcentrato">
<img src="http://www.giorgiotave.it/forum/forum.png" />
</div>
</body>
</html>
[/php]Ora vedi che nel div "divcentrato" ho dato le dimensioni dell'immagini, che in questo caso è 153x50.
Usando l'absolute con top e left al 50%, l'immagine verrebbe centrata nell'angolo in alto a sinistra dell'immagine.
Quindi si imposta manualmente un margine negativo sia per l'altezza che per la larghezza equivalente alla metà della larghezza e altezza dell'immagine.
L'ho testato su qualche browser e sembra andare.
Attendo riscontri.

Saluti, Marco.

yabeforg

innanzitutto molte grazie, non ci speravo.

Il tuo codice funziona benissimo.Non capisco perchè quando metto la mia immagine mi centra l'angolo in alto a sx.

Non capisco come risolvere. Ho impostato anche come dici tu la metà delle dimensione effettiva... niente cmq!

sai dirmi come centrare una immagine di 800 x 400?

marcocarrieri

Ora vedo e ti so dire.
Un po di test e arrivo.

marcocarrieri

Cosi sembra andare.

[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
}
#divcentrato
{
position:absolute;
top:50%;
left:50%;
width:800px;
height:400px;
margin-left:-400px;
margin-top:-200px;
}
</style>
</head>
<body>
<div id="divcentrato">
<img src="http://images1.wikia.nocookie.net/__cb20091112225826/lossimpson/es/images/2/24/Mapa_de_Italia.png" />
</div>
</body>
</html>
[/php]

eternity

Scusate ma secondo me le impostazioni width e height sul div non servono a nulla perchè il div prende naturalmente la grandezza dell'immagine poi perchè invece di fare il div non mettere direttamente l'immagine cioè <img id="divcentrato"

no?

marcocarrieri

Solo perchè si era parlato anche di un eventuale testo tutto qui.

eternity

Questo si, ho fatto ora delle prove e i parametri di altezza e larghezza non servono.

marcocarrieri

Si si concordo con te.
Per la sola immagine è come dici te sposti l'id dentro all'immagine e togli larghezza e altezza.
Queste ultime però le tieni come riferimento per i margini negativi.
Concordi?

yabeforg

grazie!!!! funziona, ovviamente.
Però con i discorsi dopo mi avete confuso le idee....

Quindi il codice corretto come sarebbe?

eternity

@marcocarrieri said:

Si si concordo con te.
Per la sola immagine è come dici te sposti l'id dentro all'immagine e togli larghezza e altezza.
Queste ultime però le tieni come riferimento per i margini negativi.
Concordi?

Neanche, ci sono i parametri margin-top e left l'altezza e la larghezza non servono.

grazie!!!! funziona, ovviamente.
Però con i discorsi dopo mi avete confuso le idee....

Quindi il codice corretto come sarebbe? ```

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
    html,body
    {
        margin:0px;
        padding:0px;
    }
    #divcentrato
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-400px;
        margin-top:-200px;
    }
    </style>
</head>
<body>
        <img id="divcentrato" src="url della tua immagine" />
</body>

</html>

marcocarrieri

Li tieni nel senso li tieni a mente...