Neden margin: bir görüntüyü otomatik olarak ortalamıyor?

94

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

divOlması gerektiği ancak görüntü kendisini ortalamak olmadığı için% 100'e genişler. Neden?

html css

— Joe Phillips
kaynak

200

Çünkü görüntünüz bir satır içi blok öğesidir . Bunu aşağıdaki gibi blok düzeyinde bir öğeye değiştirebilirsiniz :

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

ve ortalanacaktır.

— Keltex
kaynak

10

Bunu blok seviyesi olarak oluşturmalısınız;

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

— TheDeadMedic
kaynak

Neden dikey değil de sadece yatay olarak hizalı?

— Bay Bell

4

Dikey hizalama umduğunuz kadar düz değildir. Her şey CSS spesifikasyonuna bağlı - konuyla ilgili bu güzel ve özlü makaleye göz atın

— TheDeadMedic

8

Ekle style="text-align:center;"

aşağıdaki kodu deneyin

<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
kaynak

Cevabınızın yanlış olduğunu düşünmüyorum, ancak sizin yanıtınızın ekran türü ile ilgili herhangi bir açıklaması eksik.

— Joe Phillips

Cevabınız alternatif bir çözüm olarak düşünülebilirse de, bunu tavsiye etmem. Bunun nedeni, div'in içine başka bir şey eklerseniz, örneğin bir başlık, görüntü ile merkeze hizalanmasıdır. Başlığı sola hizalamak için bunun için daha fazla stil yazmanız gerekir. Div'e eklediğiniz her şey için bunu yapmaya devam etmeniz gerekecek. Bu nedenle display: block;, resme eklemek şiddetle tavsiye edilir.

— Devner

2

Bunun eski bir gönderi olduğunu biliyorum, ancak aynı sorunu nasıl çözdüğümü paylaşmak istedim.

Resmim bir şamandırayı miras alıyordu: bir üst sınıftan sol. Float: none ayarlayarak margin: 0 auto ve display: block düzgün çalışıyor. Umarım gelecekte birine yardımcı olabilir.

— Ryan Hollingsworth
kaynak

1

Nesne için belirli bir genişlik tanımlamam gerektiğini yoksa başka hiçbir şeyin onu merkeze alamayacağını anladım. Göreceli genişlik çalışmıyor.

— kedi Kadın
kaynak

2

Bu soruya bir cevap vermiyor. Bir yazarı eleştirmek veya açıklama istemek için, gönderisinin altına bir yorum bırakın - kendi gönderilerinize her zaman yorum yapabilirsiniz ve yeterli itibara sahip olduğunuzda herhangi bir gönderi hakkında yorum yapabilirsiniz .

— Kristijan Iliev

Demek istediğim, birkaç kişi işe yarayan yanıtlar verirken, bunlar yalnızca kod nesnenin genişliğinin belirli bir tanımını içeriyorsa işe yarar. Ör: <img [... vb., Vb., ...] style = "display: block; margin: auto; width: 200px" /> çalışacaktır, ancak "genişlik" gibi göreli bir boyut kullanmayın :% 50 ". Elbette, "genişlik:% 100" kullanırsanız, bu durumda merkezleme bir sorun olmaz, çünkü bu durumda nesnenin solunda veya sağında kenar boşluğu olmaz.

— Kedi

0

aç divsonra koy

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

image etiket (veya) içerik

yakın div

— Hamd İslam
kaynak

0

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

— Salil
kaynak

0

Buldum ... margin: 0 auto; benim için çalışıyor. Ama aynı zamanda sınıfın, float: left; bu yüzden eklemeniz gerekebileceğine dikkat edin ... float: none; Bu, bir medya sorgusunu kodlarken benim durumumda çalıştı.

— Dino
kaynak