Perché non margin: centra automaticamente un'immagine?

93

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

Si divespande al 100% come dovrebbe ma l'immagine non si centra. Perché?

html css

— Joe Phillips
fonte

197

Perché la tua immagine è un elemento inline-block . Puoi cambiarlo in un elemento a livello di blocco come questo:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

e sarà centrato.

— Keltex
fonte

10

Devi renderlo come livello di blocco;

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
fonte

Perché si allinea solo orizzontalmente e non verticalmente?

— Mr Bell

4

L'allineamento verticale non è così semplice come avresti sperato. Dipende tutto dalle specifiche CSS: dai un'occhiata a questo articolo meravigliosamente conciso sull'argomento - phrogz.net/css/vertical-align/index.html

— TheDeadMedic

8

Inserisci style="text-align:center;"

prova sotto il codice

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

— Pranay Rana
fonte

Non credo che la tua risposta sia errata ma alla tua manca qualsiasi spiegazione del tipo di visualizzazione.

— Joe Phillips

Sebbene la tua risposta possa essere considerata una soluzione alternativa, non la consiglierei. Il motivo è il fatto che se aggiungi qualcos'altro all'interno del div, ad esempio un'intestazione, si allinea il centro con l'immagine. Per allineare l'intestazione a sinistra, dovresti scrivere più stili per essa. Dovrai continuare a farlo per qualunque cosa aggiungi nel div. Quindi l'aggiunta display: block;all'immagine è altamente raccomandata.

— Devner

2

so che questo è un vecchio post, ma volevo condividere come ho risolto lo stesso problema.

La mia immagine ereditava un float: lasciato da una classe genitore. Impostando float: none sono stato in grado di far funzionare margin: 0 auto e display: block. Spero che possa aiutare qualcuno in futuro.

— Ryan Hollingsworth
fonte

1

Ho scoperto che devo definire una larghezza specifica per l'oggetto o nient'altro lo farà centrare. Una larghezza relativa non funziona.

— Catwoman
fonte

2

Questo non fornisce una risposta alla domanda. Per criticare o richiedere chiarimenti a un autore, lascia un commento sotto il suo post: puoi sempre commentare i tuoi post e, una volta che avrai una reputazione sufficiente, potrai commentare qualsiasi post .

— Kristijan Iliev

Il punto era che, sebbene diverse persone abbiano dato risposte che funzionano, funzionano solo se il codice include una definizione specifica della larghezza dell'oggetto. Es: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> funzionerà, ma non usare una dimensione relativa, come "width : 50% ". Ovviamente, se usi "larghezza: 100%", la centratura non è un problema, perché non c'è margine a sinistra oa destra dell'oggetto.

— Catwoman

0

apri divquindi metti

style="width:100% ; margin:0px auto;"

image tag (o) contenuto

chiudere div

— Hamd Islam
fonte

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— Salil
fonte

0

Ho trovato ... margin: 0 auto; per me va bene. Ma ho anche visto che NON funziona perché la classe è stata superata da un'altra specificità che aveva ... float: left; quindi attenzione potrebbe essere necessario aggiungere ... float: none; questo ha funzionato nel mio caso mentre stavo codificando una media query.

— Dino
fonte