Kenar boşluğu için otomatik özellik neden yatay olarak çalışırken dikey olarak çalışmıyor mu?

Web sitelerini geliştirirken, bir kabın (sabit yükseklikteki) rastgele yükseklikteki bir kapsayıcı içinde dikey olarak merkezlenmesinin, her zaman yatay bir merkezleme konteynerine geldiğinde web geliştiricisinin (en azından benim) bir kabusu olarak geldiğini gördüm (Sabit genişlikte), rastgele genişlikte bir kabın içinde, margin:0px auto; standart modelde kolay bir çıkış yolu sunma eğilimindedir.

İşler bu kadar basit olduğunda CSS, rastgele yükseklikteki bir kapsayıcının içinde sabit yükseklikte bir kap ortalamak söz konusu olduğunda neden margin:auto 0px; ile çalışmaz? Bunu yapmak için belirli bir neden var mı? Öngörüleriniz için teşekkürler.Kenar boşluğu için otomatik özellik neden yatay olarak çalışırken dikey olarak çalışmıyor mu?

kaynak

2011-12-23 ikartik90

http://phrogz.net/css/vertical-align/index.html biraz fikir veriyor: "HTML düzeni geleneksel olarak dikey davranışı belirtmek için tasarlanmamıştı. Doğası gereği genişlikle ölçeklendirilir ve içerik mevcut genişliğe göre uygun bir yüksekliğe akar. Geleneksel olarak yatay boyutlandırma ve yerleşim kolaydır; dikey boyutlandırma ve düzen bundan türetilmiştir. " – justis

true. Fakat yine de, çok daha iyi olabileceğine dair hislerim var. Dikey hizalamayı kullanamazsınız garip geliyor: orta, kap tablo olarak görüntülenmiyorsa cell: – ptriek

@jblasco: Daha önce bahsettiğim sayfayı okumuştum, ama cevabı tatmin edici bulmamış gibi görünüyor Sebep: HTML geleneksel olarak sadece CERN'de tasarlandığında basit metinsel verileri gösterme/paylaşma amaçlıydı, fakat HTML5'i geleneksel HTML ile karşılaştırdığınızda çok fazla değişiklik oldu, o zaman erişim kolaylığını artıran uyum sağlamak için yüksek zaman değil mi? – ikartik90

Düşündüğünüzden çok daha az bir kabus, sadece kenar boşluklarını kullanmayın. vertical-align gerçekten de sıvı yüksekliği dikey merkezleme için güvenmeniz gereken şeydir.

HTML:

<span></span><div id="any-height"></div>

CSS:

* { margin: 0; padding: 0; } 
html, body { 
    height: 100%; 
    text-align: center; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 
#any-height { 
    background: #000; 
    text-align: left; 
    width: 200px; 
    height: 200px; 
    vertical-align: middle; 
    display: inline-block; }

Bkz: http://jsfiddle.net/Wexcode/jLXMS/

kaynak

2011-12-23 21:06:26 Wex

Tamam, bir noktanız var. dikey hizalama mutlaka kabus değil, IE7, IE6 olduğu gibi. – ptriek

Dikey hizalamayı kullandım, ancak çoğu yerde tatmin edici bir çözüm sunmuyor. Nedeni: "Dikey hizalama" ile ilgili sorun, tüm tarayıcılarla uyumlu olmamasıdır. Referans için [bu bağlantıyı kontrol edin] (http://reference.sitepoint.com/css/vertical-align#compatibilitysection). Öyleyse puan yok. :( – ikartik90

[Bir şeyin başka tarayıcılarda çalışıp çalışmadığını doğrulayabilen araçlar var] (https://browserlab.adobe.com/en-us/index.html), bu nedenle grafiklere güvenmeniz gerekmez. şeyleri buggy gibi etiketler ... Bu büyük tarayıcılarda çalıştığından ve genişletilmiş bir uyumluluk arıyorsanız, bu makaleyi kontrol etmelisiniz (http://blog.mozilla.com/webdev/2009/02/20/çapraz tarayıcı-inline-blok /) – Wex

sorunuzla ilgili doğru cevabı olduğunu margin: auto 0 doesn benim noktayı göstermek üzere bir araya kısa bir tanıtım attı margin: 0 auto aynı şekilde çalışır çünkü width: auto aynı şekilde çalışmıyor height: auto es.

Dikey otomatik kenar boşluğu, bilinen bir yüksekliğe sahip, kesinlikle yerleştirilmiş öğeler için çalışır.

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    width: 150px; 
    height: 150px; 
    margin: auto; 
}

kaynak

2013-11-08 13:59:48 user1602599

CSS ----------------

.aligncenter{ 
     display: -webkit-box; 
     display: -moz-box; 
     display: box; 
     -webkit-box-align: center; 
     -moz-box-align: center; 
     flex-align: center; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     flex-pack: center; 
}

html ------------------ -------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

note ----------- bu css sınıfı hemen hemen tüm tarayıcılarda çalışır

kaynak

2014-01-26 11:11:01 Mok

Kenar boşluğu için otomatik özellik neden yatay olarak çalışırken dikey olarak çalışmıyor mu?

cevap

İlgili konular