Allineare i contenuti all'interno di un div

StackOverflow https://stackoverflow.com/questions/684634

  •  22-08-2019
  •  | 
  •  

Domanda

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

Inoltre, come suggerisce il nome è usato sostanzialmente per allineare il testo. La proprietà align è stato deprecato molto indietro.

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

È stato utile?

Soluzione

text-align allinea testo e altri contenuti in linea. Essa non si allinea bambini elemento di blocco.

Per fare questo, si vuole dare l'elemento che si desidera allineati larghezza, con ‘auto’ margini sinistro e destro. Questo è il modo conforme agli standard che funziona in tutto il mondo tranne che IE5.x. 

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

Per far funzionare tutto questo in IE6, è necessario assicurarsi che modalità Standard è al sistema utilizzando un DOCTYPE adatto.

Se avete veramente bisogno di supportare IE5 / quirks mode, che in questi giorni non si dovrebbe in realtà, è possibile combinare i due approcci diversi per centraggio: 

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

(Ovviamente, gli stili sono meglio messi all'interno di un foglio di stile, ma la versione in linea è illustrativo.)

Altri suggerimenti

Si può fare in questo modo anche:

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%; }

Artem Russakovskii menzionato anche, leggere l'articolo originale di Mattew James Taylor per la descrizione completa. 

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

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

Onestamente, io odio tutte le soluzioni che ho visto finora, e io ti dirò perché: Essi non sembrano allineare mai bene ... ecco quello che faccio di solito:

Lo so quali valori ogni div ei rispettivi margini di pixel tengo ... così faccio quanto segue.

creerò un div wrapper che ha una posizione assoluta e un valore a sinistra del 50% ... quindi questo div ora inizia a metà dello schermo, e poi mi sottraggo la metà di tutto il contenuto della larghezza del div ... e vengo BEAUTIFULLY ridimensionamento dei contenuti ... e penso che questo funziona su tutti i browser, anche. Provare per credere (che presuppone questo esempio tutti i contenuti del tuo sito è avvolto in un tag div che utilizza questa classe wrapper e tutto il contenuto in esso è 200px di larghezza): 

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

EDIT: Ho dimenticato di aggiungere ... si consiglia inoltre di impostare la larghezza: 0px; su questo wrapper div per alcuni browser per non mostrare le barre di scorrimento, e quindi è possibile utilizzare il posizionamento assoluto per tutti i div interni.

Questo funziona anche sorprendente per allineare verticalmente sul suo sito web, nonché utilizzando parte superiore: il 50% e margin-top. Cheers!

Qui è 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>

Tutte le risposte parlano align orizzontale.

per l'allineamento verticale più elementi di contenuto, dare 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 utilizzando HTML e CSS: 

<div style="width: Auto; margin: 0 auto;">Hello</div>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top