Come centrare orizzontalmente div all'interno del div genitore

114

Come faccio a centrare un divorizzontalmente all'interno del suo genitore divcon CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— Aquila
fonte

1

Ecco due semplici metodi per centrare i div all'interno dei div, verticalmente, orizzontalmente o entrambi (CSS puro): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

Presumo che il div genitore non abbia larghezza o larghezza ampia e il div figlio abbia una larghezza inferiore. Quanto segue imposterà il margine per la parte superiore e inferiore a zero e i lati si adattano automaticamente. Questo centra il div.

div#child {
    margin: 0 auto;
}

— Mark Embling
fonte

@Marchio. Sai come farlo funzionare in IE6? IE6 fa davvero schifo, ma ci sono ancora alcune persone che lo usano.

— Bakhtiyor

@Bakhtiyor: per quanto ricordo, sì. Quali problemi stai riscontrando? potresti voler aprire una nuova domanda se hai qualche problema specifico che non è stato toccato prima. Tuttavia, non ho accesso a IE6 per controllare.

— Mark Embling

3

@Bakhtiyor: in realtà dopo averci pensato, penso che in IE.old devi anche impostare text-align: center;il parentdiv e poi rimetterlo a sinistra (o qualsiasi altra cosa) per childquello. Non sono sicuro se questo problema affligge IE6 ...

— Mark Embling

@Mark e @Bakhtiyor per qualche motivo avevo il mio childdiv apparentemente spostato a sinistra - rispetto ai browser che sono più conformi agli standard - in tutte le versioni di IE che ho controllato (IE6-8). E text-align: center;per il parente text-align: left;per il childfisso per tutte quelle versioni.

— brookmarker

8

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— James Goodwin
fonte

2

Questa soluzione supporta IE 6, ma non dimenticare di aggiungere text-align:left;al #child div

— Moak

1

text-align:centeral div figlio o al div genitore?

— Anish Nair

6

Solo per interesse, se vuoi centrare due o più div (in modo che siano fianco a fianco al centro), ecco come farlo:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— Paul Chris Jones
fonte

4

Puoi utilizzare il valore "auto" per i margini sinistro e destro per consentire al browser di distribuire equamente lo spazio disponibile su entrambi i lati del div interno:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— X4U
fonte

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— Soufiane Hassou
fonte