Marjda auto ne yapar: 0 auto?

126

Nedir auto yapmak margin:0 auto;?

Ne yaptığını anlayamıyorum auto. Bazen nesneleri merkezleme etkisi olduğunu biliyorum. Teşekkürler.

css

— Jitendra Vyas
kaynak

189

Uyguladığınız widthnesnede bir belirlediğinizde , nesne margin: 0 autoana kabının içinde merkezi olarak oturacaktır.

autoİkinci parametre olarak belirtmek , temel olarak tarayıcıya sol ve sağ kenar boşluklarını otomatik olarak belirlemesini söyler ve bunu eşit şekilde ayarlayarak yapar. Sol ve sağ kenar boşluklarının aynı boyutta olmasını garanti eder. İlk parametre 0, hem üst hem de alt kenar boşluklarının 0 olarak ayarlanacağını gösterir.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Bu nedenle, size bir örnek vermek gerekirse, üst öğe 100px ise ve çocuk 50px ise, automülk margin-leftve arasında paylaşılacak 50px boş alan olduğunu belirleyecektir margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Hangisi verir:

margin-left:25;
margin-right:25;

Bu jsFiddle'a bir göz atın . Ebeveyn genişliğini belirtmeniz gerekmez, yalnızca alt nesnenin genişliğini belirtmeniz gerekir.

— djdd87
kaynak

ama biz herhangi bir genişliğe tanımlamak asla bodyve her zaman vermek widthve margin:0 autokarşı#wrapper

— Jitendra Vyas

tamam o zaman gövde ile nesne arasındaki boşluk tarayıcı tarafından otomatik olarak hesaplanacaktır.

— Jitendra Vyas

Benzer bir değer var %mı? Ben sol ve sağ gibi aynı sonucu verebilir css başka özellik olduğunu ifadeauto

— Jitendra Vyas

@GenericTypeTea - ve durumda ne olur margin:auto 0?

— Jitendra Vyas

Ancak margin: 20 auto kullandığımda neden sol-sağ konumlandırmayı etkiliyor gibi görünüyor? Görünüşe göre tek yaptığım üst / alt marjı eklemek oldu ...

— pitosalas

13

auto: Tarayıcı kenar boşluğunu ayarlar. Bunun sonucu tarayıcıya bağlıdır

margin: 0 auto belirtir

* top and bottom margins are 0
* right and left margins are auto

— incik
kaynak

9

Blok düzeyinde, normal akışta değiştirilmemiş elemanlar için Genişlikleri ve kenar boşluklarını hesaplama hakkındaki CSS spesifikasyonundan :

Hem 'margin-left' hem de 'margin-right' 'otomatik' ise, kullanılan değerleri eşittir. Bu, elemanı içeren bloğun kenarlarına göre yatay olarak ortalar.

— Bamya
kaynak

"kullanılan değerleri eşittir" bunun anlamı nedir?

— Jitendra Vyas

3

@ metal-gear-solid - Üst öğenin genişliği (tarayıcı veya belirtilen genişliğe göre belirlenir) 100 piksel ve alt öğenizin div genişliği 50 piksel ise. Ardından margin: 0 auto, 50px kullanılabilir alan olduğunu belirleyecektir. Daha sonra 25 vererek bunu 2'ye böler. Sol ve sağ kenar boşluğu daha sonra 25'e ayarlanır, yani değerler eşit olarak ayarlanır.

— djdd87

1

Kullanılan değerler, bu özelliği kullanan elemanın ve onu içeren bloğun gerçek görsel özelliklerine bağlı olarak gerçekte kullanılan değerleri ifade eder. Bağlantılı bölüm, bir eleman ile onu içeren blok arasındaki yatay farkı hesaplamak için kullanılan bir formüle sahiptir. Bu fark daha sonra eşit olarak dağıtılır ve gerçek yatay marj değerleri olarak kullanılır.

— Gumbo

6

margin:0 auto;

0üst-alt ve autosol-sağ içindir. Sol ve sağ kenar boşluğunun, elemanın genişliğine ve kabın genişliğine göre otomatik kenar boşluğu alacağı anlamına gelir.

Genellikle herhangi bir öğeyi merkez konuma yerleştirmek istiyorsanız, o zaman margin:automükemmel çalışır. Ancak yalnızca blok elemanlarında çalışır.

— user3237573
kaynak

1

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0, üst-alt ve otomatik, sol-sağ içindir. Tarayıcı marjı belirler.

— jaffer sathick
kaynak

1

İki değerin nasıl çalıştığına dair bazı açıklamalarla daha net hale geliyor.

Margin özelliği şunun kısaltmasıdır:

margin-top
margin-right
margin-bottom
margin-left

Öyleyse neden sadece iki değer oluyor?

Peki, marjı şu şekilde dört değerle ifade edebilirsiniz:

margin: 10px, 20px, 15px, 5px;

bu, 10 piksel üst, 20 piksel sağ, 15 piksel alt, 5 piksel sol anlamına gelir

Aynı şekilde aşağıdaki gibi iki değerle de ifade edebilirsiniz:

margin: 20px 10px;

Bu size 20px üst ve alt ve 10px sol ve sağ kenar boşluğu verir.

Ve ayarlarsanız:

margin: 20px auto;

O zaman bu, 20px'lik üst ve alt kenar boşluğu ve otomatik'in sol ve sağ kenar boşluğu anlamına gelir. Ve otomatik, sol / sağ kenar boşluğunun konteynere göre otomatik olarak ayarlandığı anlamına gelir. Öğeniz blok türü bir öğeyse, yani bir kutuysa ve görünümün tüm genişliğini kaplarsa, sol ve sağ kenar boşluğunu otomatik olarak ayarlar ve dolayısıyla öğe ortalanır.

— Angus Penye Makinası
kaynak

-3

"Merkez" etiketi için bozuk / kullanımı çok zor. Bozuk tablolara ve bloklar ve metinler için çalışmayan merkezlemeye ihtiyaç duyduğunuzda kullanışlıdır.

— Danny
kaynak