Dlaczego nie mogę wyśrodkować z marginesem: 0 auto?

131

Mam element #headerDIV, 100% widtha wewnątrz tego elementu DIV mam nieuporządkowaną listę. Zastosowałem się margin: 0 autodo listy nieuporządkowanej, ale nie wyśrodkowuje jej w nagłówku div.

Czy ktoś może mi powiedzieć, dlaczego? Pomyślałem, że jeśli zdefiniuję szerokość nadrzędnego elementu div, to lista nieuporządkowana powinna być w stanie wyśrodkować się margin: 0 auto. czego mi brakuje?

Oto mój kod: 

<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
źródło
Jakiej przeglądarki używasz? IE / Win ma pewne problemy z automatycznym marginesem.
JD Frias
Dlaczego również przesuwasz ul w prawo? Wyjmij to i prawdopodobnie także pływak: zostaw dla li, a powinno być dobrze.
Simon
1
Tworzę pasek nawigacyjny. Wyciągnąłem pływak w prawo na ul i włożyłem pływak po lewej stronie na li, ale to teraz stawia wszystko po lewej stronie.
zeckdude

Odpowiedzi:

137

Musisz zdefiniować szerokość elementu, który chcesz wyśrodkować, a nie elementu nadrzędnego.

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

Edycja : Ok, widziałem teraz stronę testową, a oto jak myślę, że chcesz to:

#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
źródło
2
co jeśli szerokość ul będzie dynamiczna. Myślę o dynamicznym wstawianiu innego tekstu do li z PHP później, więc próbuję to przewidzieć.
zeckdude
2
Tak, nie możesz wyśrodkować za pomocą margin: auto;
PatrikAkerstrand
1
Wypróbowałem twoją ostatnią sugestię, ale nie zadziałała. Przesłałem najnowszą wersję z twoimi rekomendacjami do tej samej lokalizacji, abyś mógł zobaczyć, czego doświadczam. Ul jest właśnie przesuwany w prawo o około 50 pikseli.
zeckdude
1
Jak powiedziałem w mojej sugestii, usuń pływak: po lewej
PatrikAkerstrand
1
To działało świetnie! Dziękuję bardzo za to, że zostałeś ze mną i pomogłeś mi! Ten problem mnie zabija! Dzięki jeszcze raz!
zeckdude
45

Blok inline obejmuje całą linię (od lewej do prawej), więc margines lewy i / lub prawy nie będzie tutaj działać. To, czego potrzebujesz, to blok, blok ma obramowania po lewej i prawej stronie, więc można wpływać na marginesy.

Tak to działa u mnie:

#content {
display: block;
margin: 0 auto;
}
Hoeks
źródło
Dziękuję za bardzo przydatną sugestię, miałem ten sam problem z elementem inline i nie mogłem zrozumieć, dlaczego nie działa
mastazi
1
To najlepsza odpowiedź i działa w przypadku okien o wielu rozmiarach.
Yuda Prawira
14

Dlaczego nie?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
kalys.osmonov
źródło
Dodałem wyrównanie tekstu: do lewej; do #header ul, aby wyśrodkować ul i zachować tekst w li wyrównany do lewej. Musiałem również ustawić wyświetlanie ul jako bloku inline, aby szerokość była dynamiczna (automatyczna).
Brent Self,
3

Nie wiem, dlaczego pierwsza odpowiedź jest najlepszy, próbowałem go i nie działa w rzeczywistości, jak @ kalys.osmonov powiedział, można dać text-align:centersię header, ale trzeba zrobić uljak inline-blockzamiast inline, a także trzeba powiadomienia które text-alignmogą być dziedziczone, co w pewnym stopniu nie jest dobre, więc lepszym sposobem (nie działającym poniżej IE 9) jest użycie margini transform. Po prostu usuń float righti margin;0 autood ul, jak poniżej:

#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 */
}

W ten sposób można rozwiązać problem polegający na tworzeniu dynamicznej szerokości ulśrodka, jeśli nie obchodzi Cię IE8 itp.

bill dou
źródło
0

Możemy ustawić szerokość tagu ul, a wtedy wyrówna się on do środka.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}
Vani S
źródło