Centrare gli elementi DIV con i CSS
Scritto il 2 ottobre 2005 da Maurizio PelizzoneDurante la sperimentazione di layout tableless, ho trovato molto interessante questo trucchetto per centrare orizzonzalmente un elemento DIV.
Sfruttando i fogli di stile è sufficente impostare le proprieta margin-left e margin-right su auto.
Sotto potete vedere il risultato …
Questo è il codice che ho usato.
Per praticità ho impostato le proprietà direttamente nell’elemento tramite style ma vi suggerisco di dividere la logica della pagina dalla visualizzazione se non altro per pulizia del codice.
Questo articolo è stato pubblicato il 2 ottobre 2005 alle 10:54 pm ed è stato letto
Archiviato sotto sviluppo.
Se questo post ti è piaciuto puoi iscriverti al mio Feed Rss e ricevere direttamente gli aggiornamenti di questo blog sul tuo FeedReader oppure puoi decidere
di offrirmi un caffè.
Se ti va puoi lasciare un commento e leggere quelli degli altri,
ma se preferisci puoi passare direttamente al post precedente o a quello successivo.
3 ottobre 2005
basta anche il solo margin: auto;
10 dicembre 2005
Non sono un guru del web, ma mi diletto… dopo varie ricerche ho trovato sul tuo sito la soluzione al mio problema.
Grazie!
10 dicembre 2005
Felice di averti aiutato …
14 gennaio 2006
Credo di dover ricambiare! Il link http://mauriziomavida.com/ non è esistente, forse è meglio che lo cambi?
14 gennaio 2006
grazie
18 settembre 2006
più che MARGIN:AUTO; io direi un miglior
margin:0 auto;
che equivale a
margin:0 auto 0 auto;
che equivale all’originale
margin-left:auto;margin-right:auto;
18 settembre 2006
effettivamente l’approccio di imente mi sembra il più corretto.
grazie per la dritta
10 novembre 2006
E’ da un pò che mi scervellavo per trovare la soluzione alla centratura in modo semplice, casualmente l’ho trovata…
grazie
2 maggio 2007
salve, vorrei usare questo template ma devo centrare la pagina … e non ci riesco ho letto i vs. consigli ma non ci riesco il documento css è
/* Online Business, free web template by davereederdesign.com */
body {
margin: 0;
padding: 0;
font-size: 100%;
text-align: left;
background: #e0e0e0;
color: #333;
}
/* Global styles */
* {margin: 0; padding: 0; border: 0;}
span {color: #00A2FF}
p, ul, p a, h2 {font-family: Arial, Helvetica, sans-serif}
/* Heading styles */
h1 {margin-left: 10px; font-family: Georgia, serif; color: #333; float: left; font-weight: normal; margin-left: 10px; font-size: 1.55em}
h1 a:link, h1 a:visited, h1 a:active {text-decoration: none; color: #333; font-weight: normal}
h1 a:link span, h1 a:visited span, h1 a:active span {text-decoration: none; font-weight: normal}
h1 a:hover {color: #00A2FF; text-decoration: none; font-weight: normal}
h1 a:hover span {color: #333; text-decoration: none; font-weight: normal}
h3 a, h3 a:link, h3 a:hover {font-weight: normal} /* styling for h3 heading links */
h4 a, h4 a:link, h4 a:hover, h5 a:link, h5 a:hover {font-weight: bold} /* styling for other heading links */
h2 {margin: 0; padding-left: 10px; font-size: 0.75em; background-color: #333; color: #fff; line-height: 2.0em} /* headings on black backgrounds */
h3, h4, h5 {font-family: Georgia, serif; margin: 20px 0 0 10px}
h3 {font-size: 1.25em; line-height: 1.25em; font-weight: normal}
h4 {font-size: 0.90em; line-height: 0.90em; font-weight: bold}
h5 {font-size: 0.70em; line-height: 0.70em; font-family: Arial, Helvetica, sans-serif; font-weight: bold} /* appears like bold paragraph text */
/* Text styles */
p {margin: 10px; font-size: 0.70em; line-height: 1.75em}
p.updated {margin-left: 10px; font-size: 0.60em; line-height: 0.60em; letter-spacing: 0.05em; color: #888}
#siteimg p { /* This is the large text in the site img div */
margin: 0 0 0 10px; /* removed usual top and bottom margin from paragraph to avoid layout breaking */
padding-left: 10px;
padding-top: 90px;
font-family: Georgia, serif;
font-size: 1.45em;
line-height: 1.05em;
font-weight: normal;
letter-spacing: -0.05em;
}
acronym {border-bottom: 1px dashed #333; cursor: help}
ul {margin-left: 10px; font-size: 0.70em; line-height: 1.75em; list-style: inside square}
/* Paragraph Links */
a {color: #00A2FF; font-weight: bold; text-decoration: none} /* The blue colour */
a:link {color: #00A2FF; font-weight: bold; text-decoration: none}
a:hover {color: #333; font-weight: bold; text-decoration: none}
/* Divs */
#container {
width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
background: #fff;
overflow: hidden
}
#topbar { /* Top bar, can be used for extra links etc */
width: 770px;
height: 25px;
background: #333
}
#hdr { /* Header/Banner area */
width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
height: 4.5em; /* Same as h1 line-height */
line-height: 4.5em;
background: #fff
}
#navbar { /* Main Navigation area */
width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
height: 1.75em;
background: #f0f0f0; /* Light Grey */
}
#siteimg { /* Large Site Image */
width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
height: 200px;
background: url(‘images/siteimage.jpg’) #fff; /* Light Grey */
}
#lftcol {
float: left;
width: 200px;
background: transparent;
overflow: hidden
}
#rgtcol {
float: left;
width: 570px;
background: transparent;
overflow: hidden
}
#bttmbar { /* bottom bar, containing top button and copyright info etc */
float: right;
width: 570px;
height: 3em;
line-height: 3em;
background: #fff;
overflow: hidden
}
/* Main Navigation */
#nav ul {display: inline}
#nav li {display: inline}
#nav a {
line-height: 30px; /* same as height of nav bar */
margin-left: 10px;
display: inline;
font-weight: bold
}
#nav a span {color: #333}
/* Forms, Input boxes and buttons */
form.login {float: right; height: 3em; line-height: 3em; margin: 10px 0 0 0; width: 8.0em;}
input.login {border: 1px solid #333; width: 6em; font-size: 0.95em;}
input.loginbttn {border: 0px solid #fff; width: 3em; background: #00A2FF; color: #fff; font-size: 1.0em}
/* Images */
img.rightimg {float: right; margin-left: 10px}
img.leftimg {float: left; margin-right: 10px}
img.languageimg {float: right; margin: 4px 2px 0 0} /* used for the language flags */
qualcuno mi puo’ aiutare .. grazie
10 luglio 2007
Il metodo non è supportato da IE5 in giù(oltre che IE6 in modalità quirk).
Per centrare un box con questi browser bisogna inserire text-align: center; nell’elemento genitore.
18 ottobre 2007
DoZ grazie mille
9 dicembre 2007
non ho ben capito come funziona… cosa devo aggiungere nel style.css per centrare tutto il template/sito?
9 dicembre 2007
Ho risolto così:
nel css:
#content {
width: (valore)px;
margin: 0 auto;
}
Nell’HTML:
28 giugno 2009
E per la centratura verticale?
29 giugno 2009
Io avevo scritto questo ma nel caso non fosse sufficentemente chiaro google sicuramente saprà aiutarti
26 marzo 2011
wow! it works well! tnx!