Mengapa margin tidak: memusatkan gambar secara otomatis?

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

The divmengembang sampai 100% sebagaimana mestinya namun gambar tidak pusat itu sendiri. Mengapa?

html css Joe Phillips
sumber

Jawaban:

198

Karena gambar Anda adalah elemen blok-sebaris . Anda dapat mengubahnya menjadi elemen level blok seperti ini:

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

dan itu akan dipusatkan.

Keltex
sumber
10

Anda perlu membuatnya sebagai level blok;

img {
   display: block;
   width: auto;
   margin: auto;
}
TheDeadMedic
sumber
Mengapa hanya sejajar horizontal dan tidak vertikal?
Tuan Bell
4
Penjajaran vertikal tidak lurus ke depan seperti yang Anda harapkan. Semuanya tergantung pada spesifikasi CSS - lihat artikel singkat yang indah tentang masalah ini - phrogz.net/css/vertical-align/index.html
TheDeadMedic
8

Menambahkan style="text-align:center;"

coba kode di bawah ini 

<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
sumber
Saya tidak berpikir jawaban Anda salah, tetapi jawaban Anda tidak memiliki penjelasan apa pun tentang jenis tampilan.
Joe Phillips
Meskipun jawaban Anda dapat dianggap sebagai solusi alternatif, saya tidak menyarankannya. Alasannya adalah fakta bahwa jika Anda menambahkan apa pun di dalam div, sebuah heading, misalnya, itu akan sejajar dengan gambar. Untuk menyelaraskan tajuk ke kiri, Anda harus menulis lebih banyak gaya untuk itu. Anda harus terus melakukan ini untuk apa pun yang Anda tambahkan ke div. Jadi menambahkan display: block;gambar sangat disarankan.
Devner
2

saya tahu ini adalah posting lama, tetapi ingin berbagi bagaimana saya memecahkan masalah yang sama.

Gambar saya mewarisi float: kiri dari kelas orang tua. Dengan menyetel float: none saya bisa membuat margin: 0 otomatis dan display: block berfungsi dengan baik. Semoga dapat membantu seseorang di masa depan.

Ryan Hollingsworth
sumber
1

Saya telah menemukan bahwa saya harus menentukan lebar tertentu untuk objek atau tidak ada yang akan membuatnya menjadi pusat. Lebar relatif tidak berfungsi.

wanita kucing
sumber
2
Ini tidak memberikan jawaban atas pertanyaan. Untuk mengkritik atau meminta klarifikasi dari seorang penulis, tinggalkan komentar di bawah kiriman mereka - Anda selalu dapat mengomentari kiriman Anda sendiri, dan setelah Anda memiliki reputasi yang memadai, Anda akan dapat mengomentari kiriman apa pun .
Kristijan Iliev
Maksud saya adalah, sementara beberapa orang telah memberikan jawaban yang berfungsi, mereka hanya berfungsi jika kode tersebut menyertakan definisi spesifik dari lebar objek. Mis: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> akan berfungsi, tetapi jangan gunakan ukuran relatif, seperti "lebar : 50% ". Tentu saja, jika Anda menggunakan "width: 100%" maka pemusatan tidak menjadi masalah, karena tidak ada margin di kiri atau kanan objek.
Catwoman
0

buka divlalu letakkan

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

image tag (atau) konten

tutup div

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

Saya telah menemukan ... margin: 0 auto; bekerja untuk saya. Tapi saya juga melihatnya TIDAK berhasil karena kelasnya dikalahkan oleh kekhususan lain yang memiliki ... float: left; jadi perhatikan itu, Anda mungkin perlu menambahkan ... float: none; ini berhasil dalam kasus saya saat saya mengkodekan kueri media.

Dino
sumber