Jak wyśrodkować nieuporządkowaną listę o <li>
stałej szerokości div
?
<table width="100%">
<tbody>
<tr>
<td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
<td width="59%"><p align="left"> </p>
<h1 align="left">StudioTeknik.com</h1>
<p><br align="left">
<strong>Marc-André Ménard</strong></p>
<ul>
<li>Photographie digitale</li>
<li>Infographie </li>
<li>Débug et IT (MAC et PC)</li>
<li> Retouche </li>
<li>Site internet</li>
<li>Graphisme</li>
</ul>
<p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
<p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
<p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:[email protected]"> [email protected]</a></p></td>
</tr>
</tbody>
</table>
css
html
html-lists
menardmam
źródło
źródło
Aby wyśrodkować ul, a także wyśrodkować w nim elementy li i sprawić, by szerokość ul zmieniała się dynamicznie, użyj display: inline-block; i zawiń go w wyśrodkowany element DIV.
<style type="text/css"> .wrapper { text-align: center; } .wrapper ul { display: inline-block; margin: 0; padding: 0; /* For IE, the outcast */ zoom:1; *display: inline; } .wrapper li { float: left; padding: 2px 5px; border: 1px solid black; } </style> <div class="wrapper"> <ul> <li>Three</li> <li>Blind</li> <li>Mice</li> </ul> </div>
Aktualizacja
Oto link jsFiddle do powyższego kodu.
źródło
float: none;
doul
.Uwielbiam flexbox:
ul { justify-content: center; display: flex; }
źródło
Kroki :
style="text-align:center;"
do rodzicadiv
zul
style="display:inline-table;"
doul
style="display:inline;"
doli
albo użyj
<div class="menu"> <ul> <li>item 1 </li> <li>item 2 </li> <li>item 3 </li> </ul> </div> <style> .menu { text-align: center; } .menu ul { display:inline-table; } .menu li { display:inline; } </style>
źródło
Jest to lepszy sposób na wyśrodkowanie UL wewnątrz dowolnego kontenera DIV.
To rozwiązanie CSS nie używa właściwości Width i Float. Float: Left i Width: 70%, spowoduje ból głowy, gdy będziesz musiał powielić menu na różnych stronach z różnymi pozycjami menu.
Zamiast używać szerokości, używamy dopełnienia i marginesu, aby określić przestrzeń wokół tekstu / pozycji menu. Ponadto zamiast używać Float: Left w elemencie LI, użyj display: inline-block.
Przesuwając swój LI w lewo, dosłownie przesuwasz zawartość w lewo, a następnie musisz użyć jednego z wyżej wymienionych hacków, aby wyśrodkować swój UL. Display: inline-block tworzy dla Ciebie właściwość Float (w pewnym sensie). Pobiera element LI i zamienia go w element blokowy, który leży obok siebie (nie jest pływający).
W przypadku projektowania responsywnego i korzystania z ram, takich jak Bootstrap lub Foundation, będą występować problemy podczas próby unoszenia i wyśrodkowywania zawartości. Mają wbudowane klasy, ale zawsze lepiej zrobić to od zera. To rozwiązanie jest znacznie lepsze w przypadku dynamicznych menu (takich jak system menu Adobe Business Catalyst).
Odniesienie do tego samouczka można znaleźć pod adresem : http://html-tuts.com/center-div-image-table-ul-inside-div/
HTML
<div class="container"> <ul> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </div>
CSS
.container { text-align: center; border: 1px solid green; } .container ul { border: 2px solid red; display: inline-block; margin: 10px 0; padding: 2px; } .container li { display: inline-block; } .container li a { display: inline-block; background: #444; color: #FFF; padding: 5px; text-decoration: none; }
źródło
Mógłby być
div ul { width: [INSERT FIXED WIDTH] margin: 0 auto; }
lub
div li { text-align: center; }
zależy od tego, jak powinno wyglądać (lub połączyć je)
źródło
<li>
nie są stylizowane, wygląda tak samo.Aby wyśrodkować obiekt blokowy (np.
ul
), Musisz ustawić jego szerokość, a następnie możesz ustawić dla obiektów lewy i prawy margines na auto.Aby wyśrodkować zawartość w wierszu obiektu bloku (np. Zawartość w wierszu
li
), można ustawić właściwość csstext-align: center;
.źródło
Próbować
div#divID ul {margin:0 auto;}
źródło
Po prostu dodaj
text-align: center;
do swojego<ul>
. Problem rozwiązany.źródło
Ciekawe, ale spróbuj tego z pływającymi elementami li wewnątrz ul: Przykład tutaj
Teraz problem: ul wymaga stałej szerokości, aby faktycznie znajdować się pośrodku. Jednak chcemy, aby było to relatywne do szerokości kontenera (lub dynamiczne), margin: 0 auto na ul nie działa.
Lepszym sposobem jest porzucenie listy UL / Li i użycie tutaj innego przykładu podejścia
źródło
Jeśli znasz szerokość
ul
, możesz po prostu ustawić marginesul
na0 auto;
Spowoduje to wyrównanie
ul
w środku zawierającego divPrzykład:
HTML:
<div id="container"> <ul> <li>Item1</li> <li>Item2</li> </ul> <div>
CSS:
#container ul{ width:300px; margin:0 auto; }
źródło
Oto rozwiązanie, które udało mi się znaleźć:
#wrapper { float:right; position:relative; left:-50%; text-align:left; } #wrapper ul { list-style:none; position:relative; left:50%; } #wrapper li{ float:left; position:relative; }
źródło
Inną opcją jest:
HTML
<nav> <ul class = "main-nav"> <li> Productos </li> <li> Catalogo </li> <li> Contact </li> <li> Us </li> </ul> </nav>
CSS:
nav { text-align: center; } nav .main-nav li { float: left; width: 20%; margin-right: 5%; font-size: 36px; text-align: center; }
źródło
Szukałem tego samego przypadku i wypróbowałem wszystkie odpowiedzi, zmieniając szerokość
<li>
.Niestety nie udało się uzyskać tej samej odległości po lewej i prawej stronie
<ul>
pudełka.Najbardziej pasująca jest ta odpowiedź, ale wymaga dostosowania zmiany szerokości za pomocą dopełnienia
.container ul { ... padding: 10px 25px; } .container li { ... width: 100px; }
Zobacz wynik poniżej, wszystkie odległości między
<li>
również do<ul>
pudełka są takie same.Możesz to sprawdzić na tym jsFiddle:
http://jsfiddle.net/qwbexxog/14/
źródło
<div id="container"> <table width="100%" height="100%"> <tr> <td align="center" valign="middle"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </td> </tr> </table> </div>
źródło
używaj oldschoolowych tagów centralnych
<div> <center> <ul> <li>...</li> </ul></center> </div>
:-)
źródło
center
Element został uznany za przestarzały w HTML 4.01 i nie jest obsługiwany w XHTML 1.0 Strict DTD” z w3schools.com/TAGS/tag_center.asp