Jak wyśrodkować <ul> <li> na div

88

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">&nbsp;</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>

menardmam
źródło

Odpowiedzi:

139

Ponieważ elementy uli lidisplay: blockdomyślnie - nadaj im automatyczne marginesy i szerokość mniejszą niż ich kontener .

ul {
    width: 70%;
    margin: auto;
}

Jeśli zmieniłeś ich właściwość wyświetlania lub zrobiłeś coś, co nadpisuje normalne reguły wyrównania (takie jak unoszenie ich), to nie zadziała.

Quentin
źródło
4
jeśli to cię nie uszczęśliwi, to prawdopodobnie będzie: stackoverflow.com/questions/2865380/…
Bruiser
10
Szerokość ustawienia: auto; i wyświetlacz: inline-block; pozwoliłoby Twojemu ul zachowywać się jak wiersz tekstu. Możesz wtedy użyć text-align: center; w elemencie nadrzędnym. Pozwoliłoby to również twojemu ul rosnąć i kurczyć się wraz ze zmianą zawartości wewnętrznej, w przeciwieństwie do posiadania stałej szerokości.
I_a
@Chetabahana - Patrzysz na tekst, a nie na element: jsfiddle.net/qwbexxog/3
Quentin
nie działa dobrze ze wszystkimi rozdzielczościami, działa flex center
Srinivas 08
164

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.

Aram Kocharyan
źródło
To jest problem, który miałem z innymi rozwiązaniami, nie zadziałałoby dla elementów li, gdybym je zmienił.
Aram Kocharyan,
Używałem tego do nawigacji Bootstrap 3 i musiałem dodać float: none;do ul.
Dylan Valade
36

Uwielbiam flexbox:

ul {
  justify-content: center;
  display: flex;
}
Christian Michael
źródło
24

Kroki :

  1. Zapis style="text-align:center;"do rodzica divzul
  2. Napisz style="display:inline-table;"doul
  3. Napisz 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>
Dashrath
źródło
Musimy dodać margines, w przeciwnym razie jest zagnieżdżony, sprawdź tutaj jsfiddle.net/qwbexxog/4
Chetabahana
Ta odpowiedź mnie uratowała!
Huan
9

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;
}
Specjaliści internetowi DSA
źródło
6

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)

FP
źródło
2
Ta ostatnia opcja nie wyśrodkowuje elementy listy, tylko ich wbudowaną zawartość.
Quentin
Mimo to, jeśli <li>nie są stylizowane, wygląda tak samo.
FP
4

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ść css text-align: center;.

anddoutoi
źródło
1

Próbować

div#divID ul {margin:0 auto;}
Keir
źródło
1

Po prostu dodaj text-align: center;do swojego <ul>. Problem rozwiązany.

Jonny Haynes
źródło
1

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

Plippie
źródło
0

Jeśli znasz szerokość ul, możesz po prostu ustawić margines ulna0 auto;

Spowoduje to wyrównanie ulw środku zawierającego div

Przykład:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }
Jamie Dixon
źródło
0

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;
}
Adam Boostani
źródło
0

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;
}
Trapo
źródło
0

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.wprowadź opis obrazu tutaj

Możesz to sprawdzić na tym jsFiddle:
http://jsfiddle.net/qwbexxog/14/

Chetabahana
źródło
-1
<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>
Yo Momma
źródło
-4

używaj oldschoolowych tagów centralnych

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

justastefan
źródło
Należy unikać używania wyrażeń typu stylu w kodzie znaczników. Po to powstał CSS!
FP
1
Wykonalne, ale pamiętaj, że: „ centerElement 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
okw
4
westchnienie W3Schools jak zwykle podaje niepełne, błędne informacje. Został uznany za przestarzały w wersji 4.0, a nie w 4.01 i nie pojawia się w żadnym wariancie Strict (wyróżnienie XHTML 1.0 jest dziwnym wyborem).
Quentin
Jak wspomniano wcześniej, zostały one wycofane w HTML 4.01 ... również to po prostu zła praktyka ...
Jonny Haynes
2
Tak, nie powinien używać tego typu tagów, ale to nie jest powód, by zasługiwać na negatywną odpowiedź. Czasami zależy nam na najgrubszym rozwiązaniu. I dla mnie ta odpowiedź jest pozytywna.
workdreamer,