Margin auto non funziona

[plaf2000]

Ho il seguente codice:

HTML

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

CSS

#section
{
 width: 96%;
 height: 60%; 
 margin: 0 auto;
}

#container
{

 display: inline-block;
 height: 100%;
 width: 70%;


}

.centrato
{

 padding: 1%;
 width: 50%;
 margin: auto;
 text-align: center;
 vertical-align: middle;


}

Il paragrafo ".centrato" viene centrato all'interno dell'aside "#container" solo orizzontalmente, ma non verticalmente, perché? Qual è la soluzione al problema? (Preferirei che l'altezza rimanesse "su misura" intorno al ".centrato")

Grazie mille in anticipo

[carlomarangoni]

vertical-align: middle;
non funziona ormai quasi più, bisogna usare line-height dare un'altezza al contenitore e lo stesso valore a line-height

Edit: Per postare del codice bisogna usare il tag [ code]....[/code]

[plaf2000]

Non esiste un altro metodo che possa permettere di non dover settare l'altezza?? E poi perché non funziona margin:auto??

[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?