Allinea i contenuti all'interno di un div

Uso lo stile css text-align per allineare i contenuti all'interno di un contenitore in HTML. Funziona bene mentre il contenuto è di testo o il browser è IE. Ma per il resto non funziona.

Inoltre, come suggerisce il nome, viene utilizzato sostanzialmente per allineare il testo. La proprietà align è stata deprecata da molto tempo.

C'è un altro modo per allineare i contenuti in HTML?

text-align allinea il testo e altri contenuti incorporati. Non allinea i figli di elementi a blocchi.

Per fare ciò, vuoi dare all'elemento che vuoi allineato una larghezza, con i margini sinistro e destro "auto". Questo è il modo conforme agli standard che funziona ovunque tranne IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Affinché ciò funzioni in IE6, è necessario assicurarsi che la Modalità standard sia attiva utilizzando un DOCTYPE adatto.

Se hai davvero bisogno di supportare IE5 / Quirks Mode, cosa che attualmente non dovresti davvero, è possibile combinare i due diversi approcci al centraggio:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Ovviamente, gli stili sono meglio inseriti in un foglio di stile, ma la versione in linea è illustrativa.)

Puoi farlo anche in questo modo:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Come menzionato anche Artem Russakovskii , leggi l'articolo originale di Mattew James Taylor per una descrizione completa.

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

Onestamente, odio tutte le soluzioni che ho visto finora, e ti dirò perché: proprio non sembrano mai allinearlo nel modo giusto ... quindi ecco cosa faccio di solito:

So quali valori di pixel sono contenuti in ogni div e nei rispettivi margini ... quindi faccio quanto segue.

Creerò un div wrapper che ha una posizione assoluta e un valore sinistro del 50% ... quindi questo div ora inizia al centro dello schermo, quindi sottraggo metà del contenuto della larghezza del div ... e ricevo in modo BELLEVATO il ridimensionamento dei contenuti ... e penso che funzioni anche su tutti i browser. Provalo tu stesso (questo esempio presuppone che tutto il contenuto del tuo sito sia racchiuso in un tag div che utilizza questa classe wrapper e tutto il contenuto in essa è di 200px di larghezza):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: ho dimenticato di aggiungere ... potresti anche voler impostare larghezza: 0px; su questo div wrapper per alcuni browser per non mostrare le barre di scorrimento, quindi è possibile utilizzare il posizionamento assoluto per tutti i div interni.

Questo funziona anche INCREDIBILE per allineare verticalmente i tuoi contenuti e utilizzare top: 50% e margin-top. Saluti!

Ecco una tecnica che uso che ha funzionato bene:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Di seguito sono riportati i metodi che hanno sempre funzionato per me

1. Utilizzando il modello di layout flessibile :

Impostare la visualizzazione del div padre su display: flex;e sarà possibile allineare gli elementi figlio all'interno del div usando justify-content: center;(per allineare gli elementi sull'asse principale) e align-items: center;(per allineare gli elementi sull'asse trasversale).

Se hai più di un elemento figlio e vuoi controllare il modo in cui sono organizzati (colonna / righe), puoi anche aggiungere flex-directionproprietà.

Esempio funzionante:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

2. (metodo precedente) Utilizzo di posizione, proprietà dei margini e dimensione fissa

Esempio funzionante:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Tutte le risposte parlano di allineamento orizzontale.

Per l'allineamento verticale di più elementi di contenuto, dai un'occhiata a questo approccio:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Solo un altro esempio usando HTML e CSS:

<div style="width: Auto; margin: 0 auto;">Hello</div>