Margin otomatis tidak memusatkan gambar di halaman

97

Dalam contoh ini gambar tidak berada di tengah. Mengapa? Browser saya adalah Google Chrome v10 di windows 7, bukan IE.

<img src="/img/logo.png" style="margin:0px auto;"/>
css google-chrome margin centering Desainer web
sumber
Menguji kelas gaya, saya menemukan bahwa ini bukan margin kerja : 0 otomatis; setelah beberapa pengujian menemukan bahwa jika nama kelas yang Anda tambahkan ke elemen memiliki nama yang sama sebagai elemen, ini tidak akan berfungsi.
LostLight

Jawaban:

218

tambahkan display:block;dan itu akan berhasil. Gambar sebaris secara default

Untuk memperjelas, lebar default untuk blockelemen adalah auto, yang tentu saja mengisi seluruh lebar yang tersedia dari elemen penampung.

Dengan mengatur margin ke auto, browser menetapkan setengah dari sisa ruang ke margin-leftdan setengah lainnya ke margin-right.

Ross
sumber
12
+1 Untuk menjadi benar. Akan menjadi jawaban yang bagus jika Anda menguraikan tentang apa yang diperlukan untuk margin:automemusatkan item dalam aliran. ( display:blockatau display:table, position:staticatau position:relative, dll.)
Phrogz
1
@Septianjoko_ setuju; menambahkan beberapa penjelasan.
Ross
15
Mereka yang membaca ini mungkin juga merasa berguna untuk menambahkan "float" none karena memiliki jenis float lain akan merusak margin Anda secara otomatis.
Code Whisperer
Tapi itu masih belum terpusat. Itu hanya berada di tengah secara horizontal. Saya ingin memusatkannya secara vertikal, tetapi bahkan jika saya mengubahnya 0px automenjadi hanya autoitu masih tidak berfungsi.
Aaron Franke
14

Dalam keadaan tertentu (seperti versi sebelumnya dari IE, Gecko, WebKit) dan warisan, unsur dengan position:relative;akan mencegah margin:0 auto;dari bekerja, bahkan jika top, right, bottom, dan lefttidak diatur.

Menyetel elemen ke position:static;(default) dapat memperbaikinya dalam keadaan ini. Umumnya, elemen level blok dengan lebar yang ditentukan akan menghormati margin:0 auto;penggunaan salah satu relativeatau staticpemosisian.

Brendan
sumber
1
margin: 0 autobekerja dengan baik pada elemen yang diposisikan secara relatif selama mereka adalah elemen blok tanpa float dan lebar yang ditentukan ...
Ennui
Saya berasumsi itu sarkasme. Jika Anda mengedit jawaban Anda agar tidak tidak akurat, saya akan menghapus suara negatifnya. Saya telah menulis CSS selama hampir 15 tahun dan tidak pernah dapat mengingat margin otomatis tidak berfungsi untuk memusatkan secara horizontal elemen lebar tetap yang diposisikan secara relatif - meskipun properti lain menyukai floatdan displaydapat mengubah perilaku itu.
Ennui
14

Anda dapat memusatkan div lebar otomatis menggunakan display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
sameeuor
sumber
1
Ini berhasil, dan saya tidak tahu mengapa. Bisakah Anda menjelaskan?
ThatsJustCheesy
1
Saya belum pernah menggunakan ini sebelumnya, tetapi ini berhasil untuk saya sekarang.
zkytony
10

Dalam kasus saya, masalahnya adalah saya telah mengatur lebar min dan maks tanpa lebar itu sendiri.

Daniel Sitarz
sumber
3
untuk rekap: elemen harus position:static, memiliki width:set tetap dan menjadi display:blockelemen
Joey T
Itu juga masalah lebar bagi saya - bootstrap secara otomatis mengatur div saya agar menggunakan 100% tersedia
Edmund Sulzanok
6

Setiap kali kita tidak menambah lebar dan menambah margin:auto, saya kira itu tidak akan berhasil. Ini dari pengalaman saya. Lebar memberi gagasan di mana tepatnya ia perlu memberikan margin yang sama.

tejaswini celana
sumber
2

ada alternatif untuk margin-left:auto; margin-right: auto;atau margin:0 auto;untuk yang menggunakan position:absolute;ini adalah caranya:
Anda mengatur posisi kiri elemen menjadi 50% ( left:50%;) tetapi itu tidak akan memusatkannya dengan benar agar elemen berada di tengah dengan benar Anda perlu memberinya a margin minus setengah lebarnya, yang akan memusatkan elemen Anda dengan sempurna

berikut ini contohnya: http://jsfiddle.net/35ERq/3/

Andrei
sumber
0

Untuk tombol bootstrap:

display: table; 
margin: 0 auto;
Abram
sumber
0

letakkan ini di css tubuh: background: # 3D668F; lalu tambahkan: display: block; margin: otomatis; ke css img.

Gail
sumber