centrowania ul pływaki wewnątrz div

Question

Próbuję wyśrodkować ten dolny nav na stronie testowej:

http://heroicdreams.com/kktest/

ul li korzysta float:left; co jest to, co myślę jest co pozostanie zablokowany do lewo. Próbuję dowiedzieć się, jak zmusić go do wyśrodkowania.

Aby wyświetlić linki w poziomie, musiałem unieść je w lewo, ale teraz nie mogę ustawić całej nawigacji w środku. Czy istnieje sposób?

Answer 1

często przy użyciu:

.divStyle { 
    text-align: center; 
} 
ul.styleName { 
    margin: 0 auto; 
    text-align: left; 
} 

rade.

Stosowanie marginesu "auto" po lewej i prawej stronie symbolu ul spowoduje, że centrum będzie się wyśrodkowywać w div za każdym razem, gdy div ma wyśrodkowany tekst. Jest to liczba witryn internetowych, w których znajduje się div, który służy jako główna treść strony.

Answer 2

Albo CSS:

margin: 0px auto; 

lub

/*on the nav's parent*/ 
text-align: center; 

/*on the nav*/ 
text-align: left; 

Answer 3

Aby margin:0 auto do pracy, trzeba ustawić szerokość na ul i wyjąć display:inline:

#footerLinks ul { 
    list-style:none; 
    margin:0 auto; 
    padding:0; 
    width:400px; 
} 

Answer 4

Oto, w jaki sposób go rozwiązałem i dotyczy również dynamicznie generowanych menu.

Przyjmijmy to dynamicznie generowane menu:

<div id="menu"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
</div> 

i to jest CSS:

.menu { 
    width:300px; 
    text-align: center; /*Set a width and text-align on the main div*/ 
} 

.menu ul{ 
    margin:0; 
    padding:0; 
    display:inline-block; 
    list-style: none; /*Set display to inline-block to the ul*/ 
} 

.menu ul li { 
    float: left; 
    margin-right: 1.3em; /*this is the usual*/ 
    padding: 0; 
} 

Teraz, lista się koncentrować trzeba dodać punkt pusty wyczyść pływak. Można to zrobić ręcznie, jeśli menu jest statyczna lub używając jQuery takiego:

$(document).ready(function() { 
    $("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child'); 
}) 

i CSS z .clear ustępu będą:

p.clear{ 
    clear:both; 
    margin:0; 
    padding:0; 
    height: 0; 
    width: 0; 
} 

i to jest to!

Answer 5

1. Dodaj do div rodzica ul.
2. Dodaj style=" display:inline-table;" do ul.

Answer 6

Hmm, myślę, że zasada KISS stosuje tutaj:

ul { text-align: center; } 
ul li { display: inline-block; }