Margin auto non funziona

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

[Prill]

Prova lasciandolo come inline-block e seguendo quest'altra, nuova, tecnica http://zerosixthree.se/vertical-alig...-lines-of-css/ . Poi dicci se funziona

[plaf2000]

Prova lasciandolo come inline-block e seguendo quest'altra, nuova, tecnica http://zerosixthree.se/vertical-alig...-lines-of-css/ . Poi dicci se funziona

Ok grazie mille ancora, mi sembra un po' complicato e forse continuerò ad usare float al posto dell'inline-block, proverò comunque più tardi e vi farò sapere.

A più tardi

[Prill]

Vorrei chiederti però una cosa. Ma stiamo lavorando effettivamente con altezze non conosciute e interamente in percentuale? L'altezza di section è il 60% di altra altezza in percentuale o di un'altezza fissa? Il contenuto che deve essere centrato verticalmente ha altezza variabile? Perché se così non fosse basterebbe fare un po' di conti e avere un margin-top adeguato