it-swarm.dev

Zentrieren Sie <ul> <li> in div

Nach einiger Suche habe ich keine geeignete Methode gefunden, um eine Liste von <li> auf eine feste Breite div zu zentrieren.

Schau mal auf die Seite .. Es funktioniert auch nicht!

76
menardmam

Da ul und li Elemente standardmäßig display: block sind, geben Sie ihnen auto-Ränder und eine Breite, die kleiner ist als ihr Container .

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

Wenn Sie ihre Anzeigeeigenschaften geändert haben oder etwas getan haben, das normale Ausrichtungsregeln überschreibt (z. B. das Verschieben von Regeln), funktioniert dies nicht. 

122
Quentin

Um die ul und zu zentrieren und die li-Elemente ebenfalls zentriert zu haben, und um die Breite der ul dynamisch zu ändern, verwenden Sie display: inline-block; und wickeln Sie es in ein zentriertes 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>

Update

Hier ist ein jsFiddle-Link zum obigen Code.

152
Aram Kocharyan

Schritte :

  1. Schreibe style="text-align:center;" in das übergeordnete div von ul
  2. Schreibe style="display:inline-table;" in ul
  3. Schreibe style="display:inline;" in li

oder verwenden

<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>
20
Dashrath

Dies ist eine bessere Methode, um ULs in jedem DIV-Container zu zentrieren. 

Diese CSS-Lösung verwendet keine Width- und Float-Eigenschaften. Float: Left und Width: 70%, verursacht Kopfschmerzen, wenn Sie Ihr Menü auf verschiedenen Seiten mit verschiedenen Menüelementen duplizieren müssen. 

Anstelle der Breite verwenden wir Abstand und Abstand um den Text/Menüpunkt zu bestimmen. Verwenden Sie anstelle von Float: Left im LI-Element auch display: inline-block. 

Wenn Sie Ihren LI nach links bewegen, schweben Sie buchstäblich Ihren Inhalt nach links und müssen dann einen der oben genannten Hacks verwenden, um Ihren UL zu zentrieren. Anzeige: Inline-Block erstellt Ihre Float-Eigenschaft (Art). Es nimmt Ihr LI-Element und verwandelt es in ein Blockelement, das nebeneinander liegt (nicht schwebend). 

Beim Responsive Design und bei der Verwendung von Frameworks wie Bootstrap oder Foundation treten Probleme auf, wenn versucht wird, Inhalte zu verschieben und zu zentrieren. Sie haben einige integrierte Klassen, aber es ist immer besser, es von Grund auf zu machen. Diese Lösung ist viel besser für dynamische Menüs (z. B. das Adobe Business Catalyst-Menüsystem).

Eine Referenz für dieses Tutorial finden Sie unter: 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;
}
8

Ich liebe flexbox:

ul {
  justify-content: center;
  display: flex;
}
8

Könnte entweder sein

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

oder

div li
{
text-align: center;
}

hängt davon ab, wie es aussehen soll (oder kombiniert)

5
Florian Peschka

Um ein Blockobjekt (z. B. die Variable ul) zu zentrieren, müssen Sie eine Breite festlegen. Anschließend können Sie die linken und rechten Ränder der Objekte auf auto setzen.

Um den Inline-Inhalt des Blockobjekts (z. B. den Inline-Inhalt von li) zu zentrieren, können Sie die css-Eigenschaft text-align: center; festlegen.

2
anddoutoi

Versuchen 

div#divID ul {margin:0 auto;}
1
Keir

Interessant, aber versuchen Sie dies mit schwebenden li-Elementen in der ul: Beispiel hier

Das Problem jetzt: Die ul braucht eine feste Breite, um tatsächlich in der Mitte zu sitzen. Wir wollen es jedoch relativ zur Containerbreite (oder dynamisch) sein, margin: 0 auto auf der ul funktioniert nicht.

Besser ist es, die UL/Li-Liste loszulassen und einen anderen Ansatz zu verwenden Beispiel hier

1
Plippie

Fügen Sie einfach text-align: center; zu Ihrem <ul> hinzu. Problem gelöst.

1
Jonny Haynes

Ich habe nach demselben Fall gesucht und alle Antworten ausprobiert, indem Sie die Breite von <li> geändert haben.
Leider konnten nicht alle links und rechts der <ul>-Box die gleiche Entfernung erreichen. 

Die engste Übereinstimmung ist diese Antwort , aber es muss die Breitenänderung mit Auffüllen anpassen

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

Siehe das Ergebnis weiter unten, alle Entfernungen zwischen <li> und dem <ul>-Feld sind gleich.  enter image description here

Sie können es in diesem jsFiddle überprüfen:
http://jsfiddle.net/qwbexxog/14/

0
Chetabahana

Hier ist die Lösung, die ich finden konnte:

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

Wenn Sie die Breite von ul kennen, können Sie einfach den Rand von ul auf 0 auto; setzen.

Dadurch wird der ul in der Mitte des übergeordneten divs ausgerichtet

Beispiel:

HTML:

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

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }
0
Jamie Dixon

Eine weitere Option ist:

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;
}
0
Trapo