Otomatik kenar boşlukları, görüntüyü sayfada ortalamıyor

97

Olarak , bu örnekte görüntü ortalanır. Neden? Tarayıcım Windows 7'de Google Chrome v10, IE değil.

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

— Web tasarımcısı
kaynak

Bir stil sınıfını test ederken, bunun çalışma marjı olmadığını buldum : 0 auto; Bazı testlerden sonra, bir elemana eklediğiniz sınıf adı bir eleman ile aynı ada sahipse bunun işe yaramayacağını anladı.

— LostLight

218

ekleyin display:block;ve işe yarayacak. Görüntüler varsayılan olarak satır içindedir

Açıklığa kavuşturmak gerekirse, bir blockelemanın varsayılan genişliği auto, elbette içeren elemanın mevcut tüm genişliğini doldurur.

Kenar boşluğunu olarak ayarlayarak, autotarayıcı kalan alanın margin-leftyarısını ve diğer yarısını için atar margin-right.

— Ross
kaynak

12

+1 Haklı olduğun için. Akışta margin:autobir öğeyi ortalamak için neyin gerekli olduğunu açıklarsanız harika bir cevap olurdu . ( display:blockveya display:table, position:staticveya position:relative, vb.)

— Phrogz

1

@Phrogz kabul etti; bazı açıklamalar ekledi.

— Ross

15

Bunu okuyanlar, "float" "hiçbiri" eklemeyi yararlı bulabilir, çünkü başka türden bir kayan nokta yoksa, marjınızı otomatik bozar.

— Code Whisperer

Ama yine de ortalanmamış. Yalnızca yatay olarak ortalanır. Dikey olarak ortalamak istiyorum, ancak 0px autosadece autoona geçsem bile yine de çalışmıyor.

— Aaron Franke

Elbette hayır, otomatik marjlar içeriği ortalamak için daha eski bir "hack" dir. Hassas hizalamaya ihtiyacınız varsa, bir esnek kutu kullanın: display: flex; align-items: center; justify-content: centerve şimdi içeriğiniz yatay ve dikey olarak ortalanır. Veya bunu align-self: center; justify-self: centeriçeriğin kendisine taşıyın . css-tricks.com/snippets/css/a-guide-to-flexbox

— Mike 'Pomax' Kamermans

14

Bazı durumlarda ve miras (IE, Gecko, Webkit önceki sürümlerinde olduğu gibi) ile elemanları position:relative;engeller margin:0 auto;olsa bile, çalışmasını top, right, bottomve leftayarlanmaz.

Öğenin position:static;(varsayılan) olarak ayarlanması, bu koşullar altında onu düzeltebilir. Genel olarak, belirli bir genişliğe sahip blok seviyesi öğeleri, margin:0 auto;ya relativeda statickonumlandırma kullanılarak dikkate alınacaktır .

— Brendan
kaynak

1

margin: 0 autogöreli olarak konumlandırılmış elemanlar üzerinde şamandıra ve belirli bir genişliğe sahip olmayan blok elemanlar oldukları sürece gayet iyi çalışır ...

— Ennui

Sanırım bu alay konusu. Cevabınızı yanlış olmayacak şekilde düzenlerseniz, olumsuz oyu kaldırırım. Neredeyse 15 yıldır CSS yazıyorum ve her zamankinden nispeten elemanları genişliği sabit konumlandırılmış yatay merkeze çalışmıyor oto marjlarını hatırlayamıyorum - gibi diğer özellikler rağmen floatve displaybu davranışı değiştirilebilir.

— Ennui

14

Otomatik genişlik div öğesini kullanarak ortalayabilirsiniz display:table;

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

— Sameeuor
kaynak

1

Bu işe yarıyor ve nedenini bilmiyorum. Açıklar mısın

— ThatsJustCheesy

1

Bunu daha önce hiç kullanmadım ama şimdi benim için çalışıyor.

— zkytony

10

Benim durumumda sorun belirlediğim olduğuydu minimum ve maksimum genişlik olmadan genişliği kendisi.

— Daniel Sitarz
kaynak

3

Özetle: elemanı olmalıdır position:static, sabit olan width:bir dizi ve olmak display:blockeleman

— Joey T

Benim için de genişlik

— sorunuydu

6

Ne zaman genişlik ve ekleme yapmazsak margin:auto, sanırım işe yaramayacak. Benim tecrübemden. Genişlik, tam olarak nerede eşit kenar boşlukları sağlaması gerektiği fikrini verir.

— tejaswini pantolon
kaynak

2

Orada bir alternatif olduğunu margin-left:auto; margin-right: auto;veya margin:0 auto;kullananlar için position:absolute;bu nasıl:
Eğer% 50 (elemanın sol konumunu ayarlamak left:50%;) ama bu doğru merkezli olmak elemanı için sırayla doğru ortalamak olmaz bunu bir vermek gerekmez genişliğinin yarısı kadar olan kenar boşluğu, elemanınızı mükemmel bir şekilde ortalayacak

işte bir örnek: http://jsfiddle.net/35ERq/3/

— Andrei
kaynak

0

Bir önyükleme düğmesi için:

display: table; 
margin: 0 auto;

— Abram
kaynak

0

bunu vücudun css'sine koyun: background: # 3D668F; sonra ekleyin: display: block; kenar boşluğu: otomatik; img css'e.

— Gail
kaynak

0

Bir gün bir div kullanarak ortalamak için çok zaman harcadığımı hatırlıyorum margin: 0 auto.

Ben vardı display: inline-block, onu kaldırdığımda, div doğru ortaladı.

Ross'un belirttiği gibi, satır içi öğeler üzerinde çalışmıyor.

— Tiagolisalves
kaynak