Allinea il contenuto all'interno di un div

119

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 altrimenti non funziona.Allinea il contenuto all'interno di un div

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

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

fonte

2009-03-26 Hemanshu Bhojak

darci più informazioni si prega? 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

175

allineamento testo allinea il testo e altri contenuti in linea. Non allinea i bambini degli elementi di blocco.

Per fare ciò, si vuole dare una larghezza all'elemento che si desidera allineato, 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>

Per far funzionare tutto questo in IE6, è necessario assicurarsi che Standards Mode è in utilizzando un DOCTYPE adeguato.

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

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

(Ovviamente, gli stili sono i migliori put all'interno di un foglio di stile, ma la versione in linea illustrativo)

fonte

2009-03-26 05:46:21 bobince

Se non si conosce la larghezza div, che è spesso il caso, questa soluzione funziona perfettamente in tutti i browser: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross -browser-support –

Ho usato

Hello

– Aamol

Solo un altro esempio utilizzando HTML e CSS:.

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

fonte

2012-08-17 13:06:10 Diogo

+27

Nessuno di ciò che hai scritto è specifico di ASP.NET. È solo HTML e CSS in linea. Volevi scrivere un controllo server con proprietà? – webworm

corretto. La risposta ora cita le tecnologie corrette. – jony

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

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

fonte

2012-12-22 19:46:54 Mahdi

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:

Conosco i valori in pixel di ciascun div e i rispettivi margini ... quindi faccio quanto segue.

Creerò un div wrapper che ha una posizione assoluta e un valore di sinistra del 50% ... quindi questo div ora inizia nel mezzo dello schermo, e quindi sottrai la metà di tutto il contenuto delle div width ... e ottengo BEAUTIFULLY ridimensionando il contenuto ... e penso che funzioni anche su tutti i browser. 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 .. .puoi anche impostare la larghezza: 0px; su questo div wrapper per alcuni browser non mostrare le barre di scorrimento, e quindi puoi usare il posizionamento assoluto per tutte le div interne.

Anche questo funziona INCREDIBILE per allineare verticalmente i tuoi contenuti usando top: 50% e margin-top. Saluti!

fonte

2013-08-04 18:21:07 Alexandru

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>

fonte

2015-06-11 12:00:09 Bloodhound

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

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

fonte

2016-10-27 15:07:56

Anche se questo snippet di codice può risolvere la domanda, [compresa una spiegazione] (http://meta.stackexchange.com/questions/114762/explaining-entally-code-based-answers) aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro, e queste persone potrebbero non conoscere le ragioni del tuo suggerimento sul codice. – andreas

Siamo spiacenti, il codice sopra allinea un centro div con il contenuto principale –

Allinea il contenuto all'interno di un div

risposta

Problemi correlati