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

109

Mam #header div, który jest 100% width i wewnątrz tego div mam nieuporządkowaną listę. Zastosowałem margin: 0 auto do listy nieuporządkowanej, ale nie wyśrodkowuję jej wewnątrz nagłówka div.Dlaczego nie mogę wyśrodkować z marginesem: 0 automatycznie?

Czy ktokolwiek może mi powiedzieć dlaczego? Pomyślałem, że jeśli zdefiniuję szerokość rodzica div, lista nieuporządkowana powinna być w stanie wyśrodkować się za pomocą 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>

Źródło

2009-06-08 zeckdude

Jakiej przeglądarki używasz? IE/Win ma pewne problemy z Auto Margin. –

firefox już teraz – zeckdude

Dlaczego również unoszę twój ul na prawo? Zdejmij to, a prawdopodobnie także spławik: pozostawiony dla li, i powinieneś mieć się dobrze. – Simon

116

Trzeba zdefiniować szerokość elementu jesteś centrowania, a nie elementu nadrzędnego.

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

Edit: Ok, widziałem testpage teraz i tutaj jest jak myślę chcesz go:

#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; 
}

Źródło

2009-06-08 06:29:51 PatrikAkerstrand

co, jeśli szerokość ulicy będzie dynamiczna. Zastanawiam się nad dynamicznym wstawianiem różnych tekstów w literach li z PHP później, więc staram się to przewidzieć. – zeckdude

Yup, wtedy nie można wyśrodkować, używając marginesu: auto; – PatrikAkerstrand

Twoje rozwiązanie przesuwa tylko ul w prawo o 50 pikseli. To nie centrum. Oto strona, nad którą pracuję: http://idea-palette.com/test.html – zeckdude

Dlaczego nie?

#header { 
    text-align: center; 
} 

#header ul { 
    display: inline; 
}

Źródło

2010-08-24 05:41:46

Dodałem tekst wyrównania: w lewo; do #header ul, aby wyśrodkować ul i zachować tekst w li wyrównany w lewo. Musiałem również ustawić ul, aby wyświetlał się jako blok inline, aby szerokość była dynamiczna (auto). –

Blok inline obejmuje całą linię (od lewej do prawej), więc margines w lewo i/lub w prawo nie będzie tutaj działał. To, czego potrzebujesz, to blok, blok ma granice po lewej i po prawej, więc możesz mieć wpływ na marginesy.

Jak to działa dla mnie:

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

Źródło

2013-04-07 17:45:37 Hoeks

To naprawdę zadziałało tylko dla mnie! – Budda

Dziękuję za bardzo przydatną sugestię, miałem ten sam problem z elementem liniowym i nie mogłem się domyślić, dlaczego to nie zadziałało. – mastazi

To jest najlepsza odpowiedź i działa dla okna o wielu rozmiarach. –

Nie wiem, dlaczego pierwsza odpowiedź jest najlepszy, próbowałem go i nie działa w rzeczywistości, jak @ kalys.osmonov powiedział ci może dać text-align:center do header, ale musisz zrobić ul jako inline-block zamiast inline, a także musisz zauważyć, że text-align może być dziedziczony, co nie jest do pewnego stopnia dobre, więc lepszy sposób (nie działa poniżej IE 9) jest używany margin i transform. Wystarczy usunąć float right i margin;0 auto z 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 */ 
}

ten sposób można rozwiązać ten problem, że co dynamiczną szerokość od ul centrum, jeśli nie obchodzi IE8 itp

Źródło

2017-06-16 06:46:11

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

Odpowiedz

Powiązane problemy