centrare immagine con css

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...

yabeforg

Grazieeeeee!!!!