Nasıl şeyleri merkezi - display: block/inline-block html ve css şeyler merkezleme yaparken

Question

, iki yaklaşımların - öğelerden birine uygulayarak:

display:block; 
margin:0 auto; 

veya kullanma:

display:inline-block; 
text-align:center; (on the parent element) 

Her zaman hangisinin daha iyi ve neden olduğunu merak ediyorum. Teşekkürler!!

Answer 1

Bu durumda daha iyi bir yol yoktur, her iki yaklaşım da işe yarayacak ve her ikisi de düzeltilecektir. Tek bir şey display: inline-block IE7 çalışmıyor (bu tarayıcıyı destekleyen varsa) her zaman kullanılarak merkezli olmalıdır o

display: inline-block; 
*display: inline; 
zoom: 1; 

Answer 2

Blok elemanlarını çalışması için yazarlardan gerekir

.block { 
    margin-left: auto; 
    margin-right: auto; 
    width: 600px; 
} 

olarak W3C tarafından belirtilen: http://www.w3.org/Style/Examples/007/center.en.html#block

text-align: center; 

iyi almış olup: metinleri ortalamak için kullanın.

Answer 3

Bu klasik ve önemli bir sorudur.

Öğeler, satır içi (yani hepsi birbirinin yanına yerleştirilir - yani bir yayılma etiketi gibi) veya blok olabilir (bir yığının üst üste yığılması anlamına gelir - bir div etiketi gibi).

Marj: auto, ilk gördüğünüzde biraz tuhaf iken, bir blok seviyesini (konum statik), öğeyi ortalamanın en iyi ve tek yoludur.

Görüntülenen herhangi bir şey için: satır içi (bir yayılma etiketi gibi) - sadece ortalamasına yerleştirme yolu, metin hizalaması belirtirseniz: ebeveynin ortası. Bu, herşeyi ekrana yansıtacaktır: içteki satır içi: statik;

Gösterge: satır içi bloğu, numaralı numaralı yeni öğenin bir melezidir (ancak başka bir yanıtta sözü edilen kesmeyi kullanıyorsanız ie7'ye kadar desteklenir). Satır içi bloğu ile, satır içi faydaları elde edersiniz, çünkü birbirinizin yanına bir sürü şey yapıştırabilir ve bunların hepsine odaklanabilirsiniz (tüm nav öğelerinin merkezileştiği bir nav düşünün). öğe ekran ile aldığınız bazı şeylerden faydalanın: blok - en önemlisi YÜKSEK.

Her bir nav öğesinin 80px boyunda bir arka plan görüntüsüne sahip olduğu bir senaryo düşünün. Satır öğesinin 80'lik bir yüksekliğe sahip olmasını sağlayamazsınız. Bu nedenle, her bir öğe görüntüsünü oluşturmanız gerekir: blok - yalnızca daha sonra Onu bir yükseklik verirsin. Bu yüzden hepsinin yan yana görünmesini sağlamak için onları yüzdünüz. Sorun şu ki, eğer onları süzerseniz, nav ve kenar boşluğuna sabit bir genişlik vermedikçe, bunların hepsini sayfada ortalayamazsınız: auto THAT. Bu, navun sabit bir genişliğe sahip olduğu anlamına gelir - tamam olabilir, ancak nav'un ​​dinamik elemanlara, farklı diller için farklı genişliklere sahip olması gereken zamanlar vardır.

Ekranı girin: satır içi blok.