Allinea i contenuti all'interno di un div


152

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?


Dacci maggiori informazioni per favore? passato il codice che non funziona in altri browser.
Shoban,

Dovresti dare un esempio del tuo markup in modo che le persone sappiano cosa stai cercando di fare. Altrimenti, la tua domanda è ambigua.
levik,

Risposte:


216

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.)


2
Se non conosci la larghezza div, come spesso accade, questa soluzione funziona perfettamente in tutti i browser: matthewjamestaylor.com/blog/…
Artem Russakovskii,

Ho usato <div style = "width: 100%; margin: 0 auto;"> Hello </div>
Aamol

9

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.


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

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

1
Mentre questo frammento di codice può risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e che queste persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
andreas,

Siamo spiacenti, sopra il codice verrà allineato un centro div con nel contenuto principale
krithi k

6

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!


2

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>


2

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>


1

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>


-2

Solo un altro esempio usando HTML e CSS:

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

27
Nulla di ciò che hai scritto è specifico di ASP.NET. È solo HTML e CSS incorporato. Intendevi scrivere un controllo server con proprietà?
webworm

1
Fisso. La risposta ora menziona le tecnologie corrette.
jony,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.