Jak wyśrodkować w poziomie nieuporządkowaną listę nieznanej szerokości?

Często występuje zbiór linków w stopce reprezentowanych na liście, takich jak: 

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Chcę, aby wszystko wewnątrz div # footer było wyśrodkowane poziomo. Gdyby to był akapit, łatwo byś powiedział: p { text-align: center; }. Albo gdybym znał szerokość <ul> mógłbym po prostu powiedzieć #footer ul { width: 400px; margin: 0 auto; }.

Ale jak wyśrodkować nieuporządkowane elementy listy bez ustawiania stałej szerokości na <ul>?

EDIT: Wyjaśnienie-pozycje listy powinny znajdować się obok siebie, a nie poniżej.

Author: philfreo, 2009-11-08
Source

6 answers

Rozwiązanie, jeśli pozycje listy mogą być display: inline jest dość proste: 

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

Jednak wiele razy musisz używać display:block na swoich <li> s. następujący CSS będzie działał, w tym przypadku: 

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
 162
Author: philfreo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-08 02:47:47

Użyj poniższego css, aby rozwiązać swój problem 

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

Uwaga: nie używaj float:left W li. spowoduje to, że Twoje li będzie wyrównane do lewej.

 34
Author: Yuvaraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-20 05:53:58

Jeszcze jedno rozwiązanie: 

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

Wtedy ul nie przeskakuje do następnego wiersza w przypadku powiększenia tekstu.

 12
Author: Andrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 17:00:46

Zależy od tego, czy masz na myśli pozycje listy są poniżej poprzedniego, czy na prawo od poprzedniego, czyli: 

Home
About
Contact

Lub 

Home | About | Contact

Pierwszy można zrobić po prostu za pomocą: 

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

Drugi można zrobić tak: 

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
 8
Author: cletus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-08 02:59:45

Spróbuj zawinąć listę w div I nadać temu div właściwość inline zamiast listy.

 2
Author: Martin Dale Lyness,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-08 02:44:18

ODPOWIEDŹ philfreo jest świetna, działa doskonale (cross-browser, z IE 7+). Po prostu dodaj mój exp dla znacznika anchor w li. 

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }
 0
Author: Jacky Nguyen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-14 04:47:28