centrare una immagine in un div sia verticalmente che orizzontalmente

**pendolino4ever** · 29-04-2005, 14:44

Eccovi il quesito:
se io ho ad esempio un div di altezza e larghezza di 500 px e devo porre dentro una immagine larga e alta 200px come faccio a centrarla sia orizzontalmente che verticalmente nel div?
Per quanto riguarda la centratura orizzontale di usa il comando DISPLAY:BLOCK in modo tale da non rendere l'immagine inline ma per la questione della centratura verticale come bisogna comportarsi?
(ps

remetto che voglio che la centratura avvenga automaticamente a seconda delle dimensioni del div che uso quindi che l'immagine si modelli automaticamente a centrarsi rispetto al div che la contiene).
Grazie

**pierofix** · 29-04-2005, 15:00

Se il div deve contenere solo l'immagine, ci sarebbero due soluzioni:

1. metti l'immagine come sfondo, sempre che non sia parte integrante del documento;

2. dai al div un line-height pari all'altezza dello stesso: in questo caso l'immagine dovrebbe automaticamente piazzarsi al centro.

**pendolino4ever** · 29-04-2005, 15:15

ok ma io voglio che la centratura sia automatica: e' possibile questo farlo tramite line-height?

**pierofix** · 29-04-2005, 15:20

Tu sai che il tuo div è alto 200px: bene, allora mettigli line-height:200px.

**pendolino4ever** · 29-04-2005, 15:24

non so per quale motivo ma non ffunziona! :master:

**pierofix** · 29-04-2005, 15:27

Facciamo così: fin'ora abbiamo preso la questione alla teorica. Descrivi nel dettaglio il risultato che vuoi ottenere ed il suo contesto, magari postando una porzione di codice d'esempio su cui lavorare.

**pendolino4ever** · 29-04-2005, 15:34

allora ecco quanto segue:

/* html */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
@import url('musicdj.css');
</style>
</head>

<body>
<div id="container">
<div id="header1">
[img]risingdjinaction.jpg[/img]
</div>
</div>
</body>
</html>

/* musicdj.css */
body {
background-color:#000000;
}

div#container {
background-color:#FFFFFF;
width:750px;
margin:0 auto;
padding:5px 0 0 0;
border-color: #333333;
border-width: 5px;
border-style: ridge;
}

div#header1 {
height:300px;
background-color:#000000;
width:auto;
margin:0 5px;
padding:0;
border-color: #333333;
border-width: 5px;
border-style: ridge;
}

div#header1 img{
display: block;
margin:auto;
padding:0;
border:0;
}

**pierofix** · 29-04-2005, 15:37

Ok, però manca il contesto. A cosa ti serve quell'immagine? Fa parte integrante del documento (è una pagina in cui analizzi un quadro?) o è un abbellimento grafico (magari un'intestazione super-spaziale)?

**pendolino4ever** · 29-04-2005, 15:43

se vogliamo dirla cosi e' un abbellimento grafico ovvero io costruendo una struttura elastica che si modello poi a seconda di come gestisco la larghezza e altezza del container voglio che appunto l'immagine in questione si modelli rispetto alle modifiche,cmq e' una semplice immagine stile titolo peri ntenderci quindi non devo lavorarci sopra o altro.

**pierofix** · 29-04-2005, 15:52

Un attimo, vediamo di ragionare. Questo punto non è superficiale come credi, anzi, è fondamentale.

Quando si crea un documento per il web, la prima cosa a cui pensare è al contenuto, non alla grafica. Detto questo, viene spontaneo smembrare il contenuto ed individuarne le zone principali.

Pertanto, quella immagine cosa rappresenta: un titolo ingentilito tramite un'immagine?

Discussione: centrare una immagine in un div sia verticalmente che orizzontalmente

Strumenti discussione

Ricerca discussione

Visualizza

centrare una immagine in un div sia verticalmente che orizzontalmente

Permessi di invio