Neden margin: 0 auto ile ortalayamıyorum?

130

Bir #headerdiv var 100% widthve bu div içinde sırasız bir listem var. margin: 0 autoSırasız listeye başvurdum , ancak başlık div içinde ortalamıyor.

Biri bana nedenini söyleyebilir mi? Üst div'in genişliğini tanımlarsam, sırasız listenin kendisini ortalayabileceğini düşündüm margin: 0 auto. Neyi kaçırıyorum?

İşte kodum:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— zeckdude
kaynak

Hangi tarayıcıyı kullanıyorsunuz? IE / Win'in Margin auto ile bazı sorunları var.

— JD Frias

Neden aynı zamanda sağda yüzüyorsun? Bunu ve muhtemelen şamandırayı da çıkar: li için bırak ve iyi olmalısın.

— Simon

1

Bir gezinti çubuğu oluşturuyorum. Ul için şamandırayı sağdan çıkardım ve li için sola bir şamandıra koydum, ama bu şimdi hepsini sola koyuyor.

— zeckdude

135

Ana öğenin değil, merkezlediğiniz öğenin genişliğini tanımlamanız gerekir.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Düzenleme : Tamam, test sayfasını şimdi gördüm ve bunu istediğinizi düşünüyorum:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
kaynak

2

Ya ul'nin genişliği dinamik olacaksa. Daha sonra PHP ile li'lerin içinde dinamik olarak farklı metinler koymayı düşünüyorum, bu yüzden bunu tahmin etmeye çalışıyorum.

— zeckdude

2

Evet, o zaman margin: auto;

— PatrikAkerstrand

1

Son önerinizi denedim ama işe yaramadı. En yeni sürümü önerilerinizle birlikte aynı konuma yükledim, böylece ne yaşadığımı görebilirsiniz. Ul sadece yaklaşık 50px sağa itiliyor.

— zeckdude

1

— Önerimde

1

BÜYÜK çalıştı! Bana yapıştığın ve bana yardım ettiğin için çok teşekkür ederim! Bu sorun beni öldürüyor! Tekrar teşekkürler!

— zeckdude

44

Bir satır içi blok (soldan sağa) tüm satırı kapsar, bu nedenle burada sol ve / veya sağ kenar boşluğu çalışmaz. İhtiyacınız olan şey bir bloktur, bir bloğun solunda ve sağında sınırları vardır, bu nedenle kenar boşluklarından etkilenebilir.

Benim için şu şekilde çalışıyor:

#content {
display: block;
margin: 0 auto;
}

— Hoeks
kaynak

Çok yararlı öneriniz için teşekkür ederim, bir satır içi öğeyle aynı sorunu yaşadım ve neden çalışmadığını

— anlayamadım

Bu en iyi cevaptır ve çok boyutlu pencere için işe yarar.

— Yuda Prawira

14

Neden olmasın?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
kaynak

Metin hizalama ekledim: sola; ul'yi ortalamak ve li içindeki metni sola hizalı tutmak için #header ul. Ayrıca, genişliğin dinamik (otomatik) olması için ul'yi satır içi blok olarak görüntülenecek şekilde ayarlamam gerekiyordu.

— Brent Öz

3

İlk cevap en iyi biridir neden ben kalys.osmonov söyledi @, sen verebilir olarak aslında çalışma denedim ve değil, bilmiyorum text-align:centeriçin header, ama yapmak zorunda ulolduğu inline-blockziyade inlineve ayrıca bildirime sahip bu bir text-aligndereceye kadar iyi olmayan kalıtsal olabilir, bu yüzden daha iyi bir yol (IE 9'un altında çalışmamak) marginve kullanmaktır transform. Sadece aşağıdaki gibi kaldırın float rightve margin;0 autoburadan ul:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

Bu şekilde, ulIE8 vb. Umursamıyorsanız dinamik merkez genişliği oluşturma sorununu çözebilirsiniz .

— fatura dou
kaynak

0

Ul etiketinin genişliğini ayarlayabiliriz, sonra ortaya hizalar.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— Vani S
kaynak