“Marj: 0 auto;” için tam olarak ne gereklidir? çalışmak?

Bir öğedeki ayarın ortalamak margin: 0 auto;için kullanıldığını biliyorum (sol-sağ). Bununla birlikte, elementin ve ebeveyninin otomatik marjın çalışması için belirli kriterleri karşılaması gerektiğini biliyorum ve sihri asla doğru şekilde göremiyorum.

Yani sorum basit: margin: 0 auto;çocuğu sol-sağ ortalamak için bir öğe ve üst öğesi üzerinde hangi CSS özelliklerinin ayarlanması gerekiyor ?

Kafamın üstünden:

1. Eleman olmalıdır blok düzeyi, örneğin, display: blockya dadisplay: table
2. Öğe yüzmemelidir
3. Elemanın sabit veya mutlak pozisyonu olmamalıdır ¹

Diğer insanların kafalarının üstünde:

4. Öğenin ²width olmayan bir değeri olmalıdırauto

Tüm bu koşulların çalışması için ortalanan eleman için geçerli olması gerektiğini unutmayın .

¹ _{Bunun tek istisnası vardır: senin sabit veya mutlak olarak konumlanmış eleman varsa left: 0; right: 0, o olacak oto marjlar ile merkezi .}

² _{Teknik olarak, margin: 0 autootomatik genişlikle çalışır, ancak otomatik genişlik otomatik kenar boşluklarına göre önceliklidir ve sonuç olarak otomatik kenar boşlukları sıfırlanır ve bu da "çalışmıyor" gibi görünmesini sağlar.}

Başımın üstünden, bir ihtiyacı var width. Merkezlediğiniz kabın genişliğini belirtmeniz gerekir (üst genişliği değil).

CSS için tam kural:

1. ( display: blockVE widthotomatik değil) VEYAdisplay: table
2. float: none
3. position: relative

Başımın üst kısmından, öğe bir blok öğesi değilse - bunu yapın.

ve sonra ona bir genişlik verin.

Ayrıca display: table ile de çalışacaktır - bu durumda, ayarlanması için bir genişlik gerektirmediği için kullanışlı bir display özelliği. (Bu yazının 5 yaşında olduğunu biliyorum, ancak yine de yoldan geçenlerle ilgili;)

Kedimin kafasının üstünde, ortalamaya divçalıştığınızdan emin olun width: 100%.

Eğer öyleyse, çocuk div'lerinde belirlenen kurallar önemli olacaktır.

Lütfen jsFiddle'ı oluşturduğum bu hızlı örneğe gidin . Umut etmek kolay. wrapperOrtaya hizalamak için sitenin genişliğine sahip bir div kullanabilirsiniz . Koymanız gerekmesinin nedeni width, tarayıcının sıvı bir düzen için gitmediğinizi bilmesidir.

İşte benim önerim:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Bir <button>öğenin çalışmasını sağlamak için genişlik belirtmeniz gerekmemesi ilginçtir - sadece olduğundan emin olun display:block: http://jsfiddle.net/muhuyttr/

Şimdi bu soruyu isabet değil, düzeltme edememek herkes için margin: 0 auto, burada en şey sana yararlı olabilecek keşfetti: Bir tableelemanın hiçbir belirtilen genişlikte olmalıdır display: tableve değil display: block sırayla margin: autoçalışma yapmak. Bu kombinasyonu olarak, bazı bariz olabilir display: blockve varsayılan widthonun kabı dolduracak şekilde genişler bir tablo verecek değerde, ancak eğer istediğiniz tablo o genişliği "doğal" olduğunu almak ve ortalanmış, ihtiyacınızdisplay: table