Centrare gli elementi DIV con i CSS

Data: 2 Ottobre 2005
Autore: Maurizio Pelizzone

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.

<div style="height: 60px; background: #CCCC99; padding: 5px;" > <div style="text-align: center; height: 50px; width: 200px; border: 1px solid red; margin-left: auto; margin-right: auto;" > Elemento Cetrato </div> </div>

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.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Questo articolo è stato pubblicato il 2 Ottobre 2005 alle 10:54 pm ed è stato letto 15784 volte
Archiviato sotto sviluppo, web, css.

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.

Forse collegati ..

Fogli di stile comodi ...
Alcuni tag html ( body e form tanto per dirne due) hanno impostato di default un margine che in alcuni
Sono arrivati ...
Sono arrivati i libri che avevo ordinato !!! Mi sento come un bambino davanti all'albero di natale che non sa da
Macromedia Dreamweaver 8
Macromedia ha messo a disposizione il download della nuova versione di dreamweaver ( solo in inglese ). Il programma di installazione
Pirati dei Caraibi
Molte lune ( maledette e non ) sono passate dall'ultima volta in cui sono andato al cinema, e l'uscita nelle
SBS2003 questo sconoscito: #1 Il primo giorno
In passato avevo già avuto qualche "incontro ravvicinato" con Windows Small Business Server 2003 che mi avevevano lasciato abbastanza indifferente,

13 Commenti per “Centrare gli elementi DIV con i CSS”

fullo
3 Ottobre 2005

basta anche il solo margin: auto;
Francesco
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!
Maurizio Pelizzone
10 Dicembre 2005

Felice di averti aiutato …
Francesco
14 Gennaio 2006

Credo di dover ricambiare! Il link http://mauriziomavida.com/ non è esistente, forse è meglio che lo cambi?
Maurizio Pelizzone
14 Gennaio 2006

grazie
imente
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;
Maurizio Pelizzone
18 Settembre 2006

effettivamente l’approccio di imente mi sembra il più corretto.
grazie per la dritta
Luke
10 Novembre 2006

E’ da un pò che mi scervellavo per trovare la soluzione alla centratura in modo semplice, casualmente l’ho trovata…

grazie
dev
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 800x600 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 800x600 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 800x600 page, allowing for scrollbar */
height: 1.75em;
background: #f0f0f0; /* Light Grey */
```
}

siteimg { /* Large Site Image */
```
width: 770px; /* Suits an 800x600 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
DoZ
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.
Sischio
18 Ottobre 2007

DoZ grazie mille
feelbeen
9 Dicembre 2007

non ho ben capito come funziona… cosa devo aggiungere nel style.css per centrare tutto il template/sito?
feelbeen
9 Dicembre 2007
Ho risolto così:

nel css:

content {
```
width: (valore)px;
margin: 0 auto;
```
}

Nell’HTML: