Durante 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 …
Elemento Cetrato
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.
basta anche il solo margin: auto;
Non sono un guru del web, ma mi diletto… dopo varie ricerche ho trovato sul tuo sito la soluzione al mio problema.
Grazie!
Felice di averti aiutato …
Credo di dover ricambiare! Il link http://mauriziomavida.com/ non è esistente, forse è meglio che lo cambi? 🙂
grazie 😉
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;
effettivamente l’approccio di imente mi sembra il più corretto.
grazie per la dritta 🙂
E’ da un pò che mi scervellavo per trovare la soluzione alla centratura in modo semplice, casualmente l’ho trovata…
grazie
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
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.
DoZ grazie mille 😀
non ho ben capito come funziona… cosa devo aggiungere nel style.css per centrare tutto il template/sito?
Ho risolto così:
nel css:
#content {
width: (valore)px;
margin: 0 auto;
}
Nell’HTML:
E per la centratura verticale?
Io avevo scritto questo ma nel caso non fosse sufficentemente chiaro google sicuramente saprà aiutarti
wow! it works well! tnx! 😉