I margini automatici non centrano l'immagine nella pagina

97

In questo esempio l'immagine non è centrata. Perché? Il mio browser è Google Chrome v10 su Windows 7, non IE.

<img src="/img/logo.png" style="margin:0px auto;"/>

— Web designer
fonte

Testando una classe di stile, ho scoperto che questo non funzionava margin: 0 auto; dopo alcuni test si è scoperto che se il nome della classe che si sta aggiungendo a un elemento ha lo stesso nome di un elemento questo non funzionerà.

— LostLight

218

aggiungi display:block;e funzionerà. Le immagini sono in linea per impostazione predefinita

Per chiarire, la larghezza predefinita per un blockelemento è auto, che ovviamente riempie l'intera larghezza disponibile dell'elemento contenitore.

Impostando il margine su auto, il browser assegna metà dello spazio rimanente a margin-lefte l'altra metà a margin-right.

— Ross
fonte

12

+1 Per aver ragione. Sarebbe un'ottima risposta se elaborassi ciò che è necessario per margin:autocentrare un elemento nel flusso. ( display:blocko display:table, position:statico position:relative, ecc.)

— Phrogz

1

@Phrogz ha accettato; aggiunto qualche spiegazione.

— Ross

15

Coloro che leggono questo possono anche trovare utile aggiungere "float" none in quanto avere qualsiasi altro tipo di float farà saltare il margine automatico.

— Code Whisperer

Ma non è ancora centrato. È centrato solo orizzontalmente. Voglio centrarlo verticalmente, ma anche se cambio 0px autoin solo autonon funziona.

— Aaron Franke

14

In alcune circostanze (come le versioni precedenti di Internet Explorer, Gecko, Webkit) e l'ereditarietà, elementi con position:relative;impediranno margin:0 auto;di lavorare, anche se top, right, bottom, e leftnon sono impostati.

L'impostazione dell'elemento su position:static;(impostazione predefinita) può risolverlo in queste circostanze. In generale, gli elementi a livello di blocco con una larghezza specificata verranno rispettati margin:0 auto;utilizzando relativeo il staticposizionamento.

— Brendan
fonte

1

margin: 0 autofunziona bene su elementi relativamente posizionati purché siano elementi blocco senza float e una larghezza specificata ...

— Ennui

Presumo sia sarcasmo. Se modifichi la tua risposta in modo che non sia imprecisa, rimuoverò il voto negativo. Scrivo CSS da quasi 15 anni e non riesco mai a ricordare che i margini automatici non funzionino per centrare orizzontalmente elementi a larghezza fissa relativamente posizionati, sebbene altre proprietà apprezzino floate displaypossano cambiare quel comportamento.

— Ennui

14

Puoi centrare il div larghezza automatica usando display:table;

div{
margin: 0px auto;
float: none;
display: table;
}

— sameeuor
fonte

1

Funziona e non so perché. Potresti spiegare?

— ThatsJustCheesy

1

Non l'ho mai usato prima, ma ora funziona per me.

— zkytony

10

Nel mio caso il problema era che avevo impostato la larghezza minima e massima senza la larghezza stessa.

— Daniel Sitarz
fonte

3

Ricapitolando: l'elemento deve essere position:static, avere un width:insieme fisso ed essere un display:blockelemento

— Joey T

Era un problema di larghezza anche per me - bootstrap ha impostato automaticamente il mio div per utilizzare il 100% disponibile

— Edmund Sulzanok

6

Ogni volta che non aggiungiamo larghezza e aggiungiamo margin:auto, immagino che non funzionerà. È dalla mia esperienza. La larghezza dà l'idea di dove esattamente deve fornire margini uguali.

— pantaloni tejaswini
fonte

2

c'è un'alternativa a margin-left:auto; margin-right: auto;o margin:0 auto;per quelli che usano position:absolute;questo è come:
imposti la posizione sinistra dell'elemento al 50% ( left:50%;) ma questo non lo centrerà correttamente in modo che l'elemento sia centrato correttamente devi dargli un margine di meno metà della sua larghezza, che centrerà perfettamente il tuo elemento

ecco un esempio: http://jsfiddle.net/35ERq/3/

— Andrei
fonte

0

Per un pulsante bootstrap:

display: table; 
margin: 0 auto;

— Abram
fonte

0

mettilo nel css del corpo: background: # 3D668F; quindi aggiungi: display: block; margine: auto; al css di img.

— Gail
fonte