Margin auto non funziona

[carlomarangoni]

... E poi perché non funziona margin:auto??

Non è questo che non funziona e poi non è questo che allinea verticalomente! Ma:

vertical-align: middle;
non funziona ormai quasi più,.....

Perchè è obsoleto e i browser moderni lo ignorano

[plaf2000]

Non è questo che non funziona e poi non è questo che allinea verticalomente! Ma:Perchè è obsoleto e i browser moderni lo ignorano

Ma allora proprio non hai capito il problema??? Il .centrato non viene centrato ALL'INTERNO DELL'ASIDE #CONTEINER!! Il problema non è il testo del .centrato che non viene centrato, ma tutto l'elementp p!!

Spero abbiate finalmente capito

[plaf2000]

*Spero hai finalmente capito

[Prill]

Manteniamo toni convenienti, grazie.

#container{
 display: table;
 width: 70%;
 height: 100%;
 vertical-align:middle;
}
.centrato{
 display: table-cell;
    padding: 1%;
 width: 50%;
 text-align: center;
 vertical-align: middle;
}

[plaf2000]

Manteniamo toni convenienti, grazie.

#container{
 display: table;
 width: 70%;
 height: 100%;
 vertical-align:middle;
}
.centrato{
 display: table-cell;
    padding: 1%;
 width: 50%;
 text-align: center;
 vertical-align: middle;
}

Hai ragione, mi scuso. Grazie mille per il codice, proverò e ti farò sapere. Ma vertical-align non è obsoleto? E perché margin:auto non viene utilizzato neanche questa volta??

[Prill]

Modifica così:

css:

#container{
 display: table;
 width: 70%;
 height: 100%;
 vertical-align:middle;
 background-color:#CC99CC
}
.centrato{
 display: table-cell;
 vertical-align: middle;
}
.centrato p{
 padding: 1%;
 width: 50%;
 text-align: center;
 margin:0 auto;
 background-color:#996699
}

html:

<section id="section">
 <aside id="container">
  <div class="centrato"><p>Testo centrato</p></div>
 </aside>
</section>

solo ai fini della visualizzazione ho inserito un colore di sfondo.

Aggiungo:

Nel precedente esempio il paragrafo non era centrato orizzontalmente perché occupava tutta la larghezza dell'elemento che lo conteneva (comportandosi come una cella).

Vertical-align non è obsoleto, ma è proprietà non applicabile a tutti gli elementi

[plaf2000]

Modifica così:

css:

#container{
 display: table;
 width: 70%;
 height: 100%;
 vertical-align:middle;
 background-color:#CC99CC
}
.centrato{
 display: table-cell;
 vertical-align: middle;
}
.centrato p{
 padding: 1%;
 width: 50%;
 text-align: center;
 margin:0 auto;
 background-color:#996699
}

html:

<section id="section">
 <aside id="container">
  <div class="centrato"><p>Testo centrato</p></div>
 </aside>
</section>

solo ai fini della visualizzazione ho inserito un colore di sfondo.

Funzionava già il codice di prima Grazie mille comunque. Non c'è invece un modo per fare in modo che il #container resti come un inline-block?