centrare un div

**D4rkAng3l** · 17-09-2008, 10:27

Ciao,
ho un problema...devo dare una sistematina ed aggiungere delle cose ad un sito già fatto da altri (in maniera piuttosto caotica)....non sò perchè non riesco a centrare un div...
La pagina in questione è questa: http://www.siatec.net/andrea/archivi...te/casino.html

Ed il div da centrare è quello avente class impostata a container che contiene i prodotti...dovrebbe essere al centro dello spazio bianco...come faccio?

Il codice HTML e CSS è questo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">

<head><title>
	gallery
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="imagetoolbar" content="no" /><meta name="Description" /><meta name="Keywords" />
<script src="http://www.bbcsite.com/template/riferimento/common.js" type="text/javascript"></script>
<style type="text/css">

body, html{
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #cbd200;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  height:100%;
}

.container{
   width: 100%;
   padding-top: 10px;
}

.intestazione{
   width: 200px;
   height: 25px;
   color: #fdfbe2;
   font-weight: bold;
   margin-left: auto;
   margin-right: auto;
   float: left;
   background-color: #e3004a;
   border: 1px solid #000000;
}

.cella{
   float: left;
   width: 200px;
   background-color: #fdfbe2;
   height: 200px;
   border: 1px solid #000000;
}

.intestazione>div{
   padding-top: 3px;
}

.cella img{
   display:block;
   width:150px;
   height:150px;
   line-height:100px;
   position:relative;
   z-index:1;	
	}

.ico{
   margin-left: 22px;
   margin-top: 22px;
}

#navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; }

#navlist li { list-style: none; margin: 0; display: inline; }
#navlist li a
{padding: 3px 0.5em 1px; margin-left: 3px; border: 1px solid #778;  border-bottom: none; background: #DDE; text-decoration: none; }
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #448; }
#navlist li a:hover { color: #000; background: #AAE; border-color: #227;}
#navlist li a#current { background: white; border-bottom: 1px solid white;}
.PorzContainer {background-color: #FFFFFF;}
.PorzInt {background-color: #FFFFFF;}
.PorzMed {background-color: #FFFFFF;}
.PorzPie {background-color: #FFFFFF;}


#ItemCorpoProdottoEcommerce{
margin:0 auto;
padding:0;
width:98%;
text-align:left;
background:transparent;
font-size:12px;
color:#fff;
}


#ItemCategorieRipeti{
margin:0 auto;
padding:0;
width:100%px;
text-align:center;
background:transparent;
}

.imgripetuta{
margin:  10px 0 0 0;
float:right;
}

div.PorzioneEcomm{
margin: 20px 0 0 10px;
padding:0;
width:600px;
float:left;
}

div.PorzioneEcomm p{
margin:0;
padding: .1em;
font-size:12px;
}

#footer{
margin:0;
padding:0;
clear:left;
width:100%;
height:40px;
line-height:30px;
background: transparent url(footer.jpg) left top no-repeat;
}


div.arearipetuta, div.arearipetutahover{
margin: 5px 0 0 0 ;
padding:0 0 20px 0!important;
padding:0;
width: 100%;
height:100%;
text-align:left; 
border-bottom:1px solid #FFFFFF;
display:block;
background:#FFFFFF;
}

div.arearipetutahover{
background:#FFFFFF;
}
</style>


</head>

<body >
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"  class="PorzContainer">
  <tr>
    <td><table width="780" border="0" align="center"  class="PorzInt">
  <tr>
    <td><div align="center" class="STRMyConfLogo">

</p></div></td>
  </tr>
</table>
<table width="780" border="0" align="center" class="PorzMed">
  <tr valign="top">
    <td width="10" rowspan="2"><div align="center" class="STRMyConfLatosx"></div></td>
    <td><div id="ItemMenu">
<div id="navcontainer"><ul id="navlist">[*]Home[*]Chi siamo[*]Cosa Facciamo[*]gallery[*]Dove Siamo[*]Contatti[/list]</div>
</div></td>
    <td width="11" rowspan="2"> <div align="center" class="STRMyConfLatodx"></div></td>
  </tr>
  <tr valign="top">
    <td width="940"><div align="center" class="STRFISSAConfFlags">
      <div align="right"></div>
    </div>
    


<div id="ItemCorpoPresentazione">
<p class="STRPRODdescriptionLINGUA">gallery</p>
<p class="STRPRODdetailsLINGUA">

Riportiamo di seguito alcune nostre realizzazioniselezionate per mostrarvi la varet&agrave;       delle tecnichee dei supporti utilizzati dallo studio artistico Creativamente.</p>
<div class="container">
<div class="intestazione">
<div>Tradizionalmente</div>
</div>
<div class="intestazione">
<div>Insolitamente</div>
</div>
<div class="intestazione">
<div>Quotidianamente</div>
</div>
<div class="cella">
<div class="ico">          </div>
</div>
<div class="cella">
<div class="ico">          </div>
</div>
<div class="cella">
<div class="ico">          </div>
</div>
</div>


</p>
<div class="container">
<div class="intestazione">
<div>Artisticamente</div>
</div>
<div class="intestazione">
<div>Preziosamente</div>
</div>
<div class="intestazione">
<div>Progetti</div>
</div>
<div class="cella">
<div class="ico"></div>
</div>
<div class="cella">
<div class="ico"></div>
</div>
<div class="cella">
<div class="ico">         </div>
</div>
</div></p>
</div>

<div id="ItemCorpoProdotto"></div>

<div id="ItemCategorieRipeti">
<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA">Lavori in corso</p>


</p>
</div>

<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA">Insolitamente</p>


</p>
</div>

<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA">Tradizionalmente</p>


</p>
</div>

<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA">Quotidianamente</p>


</p>
</div>

<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA">Artisticamente</p>


</p>
</div>

<div class="clear"></div>
</div>

<div class="arearipetuta" onmouseover="this.className = 'arearipetutahover';" onmouseout="this.className = 'arearipetuta';">
<div class="PorzioneEcomm">
<p class="STRPRODdescriptionItemLINGUA">Preziosamente</p>


</p>
</div>

<div class="clear"></div>
</div>
</div>	
	
	</td>
  </tr>
</table>

<div align="center" class="STRMyConfPiePagina"><hr />-</div>	
<div id="footer">
<div class="StrSuppidSupplier">

<SCRIPT LANGUAGE="javaScript">document.write(txt1);</SCRIPT> 1857   PI 00371278888 Site Map</p></div>
<div class="Poweredby">

Powered by BBC</p></div>
</div>

</DIV>
<script language="JavaScript">document.write('<s' + 'cript src="' + txt2 +'1857">');document.write('</' + 's' + 'cript>');</script>


</table>
</body>
</html>

Grazie
Andrea

**reddy1** · 17-09-2008, 11:52

Al body aggiungi :

text-align: center;

in qusto modo tutto sara centrato, anche il testo! Al div contenitore aggiungi quindi:

text-align: left;

in modo da mantenere il div centrato, ma i testi e i contenuti a sinistra.
Funziona anche con IE5.x

**ricman** · 17-09-2008, 12:01

Il container è largo 100% ... dove lo centri????

Gli devi dare una larghezza (es: width: 700px) e poi gli assegni anche "margin: 0 auto;" per centrarlo.

**D4rkAng3l** · 17-09-2008, 12:09

Originariamente inviato da ricman
Il container è largo 100% ... dove lo centri????

Gli devi dare una larghezza (es: width: 700px) e poi gli assegni anche "margin: 0 auto;" per centrarlo.

ah...quindi...vediamo se ho capito...per centrare un elemento questo deve avere una larghezza fissa e poi gli si assegna il margin:0 auto ?

ma che significa esattamente margin: 0 auto ?

Ora provo.

Grazie
Andrea

**reddy1** · 17-09-2008, 12:21

il solo margin: 0 auto; non funziona con IE5.x

**D4rkAng3l** · 17-09-2008, 12:37

Originariamente inviato da reddy1
il solo margin: 0 auto; non funziona con IE5.x

e che ci dovrei mettere per IE5.x ?

**reddy1** · 17-09-2008, 12:44

quello che ho scritto nella prima risposta...

**ricman** · 17-09-2008, 12:49

Riscriviamo il codice per millesima volta dato che non si ha voglia di premere sul pulsante CERCA?

**ricman** · 17-09-2008, 12:51

Per centrare (orizz.) un oggetto devi:
Definire la larghezza del conenitore (anche in %), inserire nel div da centrare "margin: 0 auto;" (o comunque fare in modo che i margini dx e sin siano automatici), inserire nel box che contiene quello da centrare "text-align: center;" questo perche` IE non riconosce i margini automatici, reimpostare l'allineamento a destra (o dove vuoi) nel box.

**ricman** · 17-09-2008, 13:11

Originariamente inviato da D4rkAng3l
per centrare un elemento questo deve avere una larghezza fissa

Non importa che sia in pixel, può essere anche in percentuale, ma non al 100%

Originariamente inviato da D4rkAng3l
e poi gli si assegna il margin:0 auto ?
ma che significa esattamente margin: 0 auto ?

Esatto.
"margin: 0 auto" significa che imposti i margini automatici alla dx e alla sx

Discussione: centrare un div

Strumenti discussione

Ricerca discussione

Visualizza

Mi aiutate a centrare un div?

Permessi di invio