Üst div içinde yatay olarak div nasıl ortalanır

114

Nasıl ortalamak do divkendi üst iç yatay divile CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— Kartal
kaynak

1

Div'leri dikey, yatay veya her ikisinde birden (saf CSS) ortalamanın iki basit yöntemi: stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

Üst div'in genişliğinin veya genişliğinin olmadığını ve alt div'in daha küçük bir genişliğe sahip olduğunu varsayıyorum. Aşağıdakiler, üst ve alt kenar boşluğunu sıfıra ve yanlar otomatik olarak sığacak şekilde ayarlayacaktır. Bu div'i merkezler.

div#child {
    margin: 0 auto;
}

— Gömülü İşaretle
kaynak

@İşaret. IE6'da nasıl çalıştırılacağını biliyor musunuz? IE6 gerçekten çok berbat, ancak yine de onu kullanan bazı insanlar var.

— 02'de Bakhtiyor

@Bakhtiyor: Hatırladığım kadarıyla öyle. Ne tür sorunlar görüyorsunuz? Daha önce değinilmemiş belirli bir sorun yaşıyorsanız yeni bir soru açmak isteyebilirsiniz. Yine de kontrol etmek için IE6'ya erişimim yok.

— Mark Embling

3

@Bakhtiyor: Aslında bu konuda düşünce sahip, ben IE.old içinde de sette gerek text-align: center;üzerine parentdiv ve daha sonra da (ya da herneyse) sola geri ayarlayın childbiri. Bu sorunun IE6'yı

— etkileyip etkilemediğinden

@Mark & @Bakhtiyor Bazı nedenlerden dolayı, childIE'nin kontrol ettiğim tüm sürümlerinde (IE6-8) div'imi daha standartlara uyumlu tarayıcılara kıyasla görünüşte sola kaydırmıştım. Ve text-align: center;için parentve text-align: left;için childtüm bu sürümleri için düzelttim.

— brookmarker

8

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— James Goodwin
kaynak

2

Bu çözüm IE 6'yı destekler, ancak text-align:left;#child div

— Moak

1

text-align:centeralt div'e mi yoksa üst div'e mi?

— Anish Nair

6

Sadece ilgi çekici olarak, iki veya daha fazla div'i ortalamak istiyorsanız (yani merkezde yan yana olurlar), işte bunu nasıl yapacağınız:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— Paul Chris Jones
kaynak

4

Tarayıcının kullanılabilir alanı iç div'in her iki tarafına da eşit olarak dağıtmasını sağlamak için sol ve sağ kenar boşlukları için "otomatik" değerini kullanabilirsiniz:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
kaynak

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— Soufiane Hassou
kaynak