Div'umu ortalamak için CSS yolu

Bir web sayfasının en üstünde oturan bir div var, ama div yatay olarak ortalanmış.

Ama bir sebepten dolayı div her zaman sola mı oturur?

Bölmeyi yatay olarak ortalanmış hale nasıl getirebilirim biliyor musunuz?

Eğer div'a "align =" center "" eklediysem, o zaman ortalanır ama ben onu ortalamak için saf bir CSS yolu arıyorum:



<head>
    <title> </title>

    
</head>
<body>

    <div id="heading">
        <div id="headingContainer">
            Select Recipes
        </div>
    </div>

</body>
</html>
4

4 cevap

Öğenin genişliği olduğundan otomatik bir kenar boşluğu kullanabilirsiniz:

 #headingContainer {
  margin: 0 auto;
  width: 980px;
  height: 110px;
  text-align: right;
  background-color: red;
}

http://jsfiddle.net/Xee6s/

5
katma
Bu mantıklı. Ancak, saflık gerçekten gerekli değildir; düşünmüyor musun
katma yazar mozillanerd, kaynak

You can align divs to center by setting the margin on the left & right to auto. this makes the browser to divide the space equally

#heading
{
  width:200px;
  margin:0 auto 0 auto;
}

In jsfiddle : http://jsfiddle.net/DfXBp/1/

1
katma

Evet marj: 0 otomatik; iyi ama metin-align: IE gibi eski tarayıcı için vücudunuzun merkezinde bırakmak zorunda

1
katma
Sadece IE6 veya IE6'dan daha eski ve daha yeni quirks modunda. Hiç kimse IE'den 6 yaşından büyük umurunda değildir ve kimse quirks modunu kullanmamalıdır.
katma yazar thirtydot, kaynak

#Heading veya #headingContainer divs'larını merkeze hizalamaya çalıştığınızı varsayarsak, yalnızca stillerine ekleyin:

margin: 0 auto;
1
katma