Wie kann ich <ul> <li> in div zentrieren?

88

Wie kann ich eine ungeordnete Liste von <li>in einer festen Breite zentrieren 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
quelle

Antworten:

139

Da ulund liElemente display: blockstandardmäßig sind, geben Sie ihnen automatische Ränder und eine Breite, die kleiner als ihr Container ist .

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

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

QUentin
quelle
4
Wenn dies Sie nicht glücklich macht, wird dies wahrscheinlich: stackoverflow.com/questions/2865380/…
Bruiser
10
Einstellbreite: auto; und Anzeige: Inline-Block; würde erlauben, dass sich Ihre ul wie eine Textzeile verhält. Sie können dann Textausrichtung verwenden: Mitte; auf dem übergeordneten Element. Dies würde es Ihrer Ul auch ermöglichen, zu wachsen und zu schrumpfen, wenn sich der innere Inhalt ändert, im Gegensatz zu einer festen Breite.
i_a
@Chetabahana - Sie sehen den Text, nicht das Element: jsfiddle.net/qwbexxog/3
Quentin
funktioniert nicht mit allen Auflösungen, Flex Center funktioniert
Srinivas08
163

Verwenden Sie display: inline-block, um die ul zu zentrieren und auch die li-Elemente darin zu zentrieren und die Breite der ul dynamisch zu ändern. und wickeln Sie es in eine zentrierte 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>

Aktualisieren

Hier ist ein jsFiddle-Link zum obigen Code.

Aram Kocharyan
quelle
Das ist das Problem, das ich mit den anderen Lösungen hatte. Es würde für die li-Elemente nicht funktionieren, wenn ich sie ändern würde.
Aram Kocharyan
Ich war mit diesem für Bootstrap 3 nav und benötigen hinzuzufügen , float: none;um die ul.
Dylan Valade
34

Ich liebe Flexbox:

ul {
  justify-content: center;
  display: flex;
}
Christian Michael
quelle
22

Schritte :

  1. Schreiben Sie style="text-align:center;"an die Eltern divvonul
  2. Schreiben Sie style="display:inline-table;"anul
  3. Schreiben Sie style="display:inline;"anli

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>
Dashrath
quelle
Wir müssen Rand hinzufügen, sonst ist einander verschachtelt überprüfen Sie hier jsfiddle.net/qwbexxog/4
Chetabahana
9

Dies ist eine bessere Möglichkeit, ULs in jedem DIV-Container zu zentrieren.

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

Anstatt Breite zu verwenden, verwenden wir Polsterung und Rand, um den Abstand um den Text- / Menüpunkt zu bestimmen. Verwenden Sie statt Float: Left im LI-Element auch display: inline-block.

Indem Sie Ihren LI nach links schweben lassen, schweben Sie Ihren Inhalt buchstäblich nach links und müssen dann einen der oben genannten Hacks verwenden, um Ihren UL zu zentrieren. Anzeige: Inline-Block erstellt Ihre Float-Eigenschaft für Sie (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 beim Verschieben und Zentrieren von Inhalten auf. Sie haben einige eingebaute Klassen, aber es ist immer besser, es von Grund auf neu zu machen. Diese Lösung eignet sich 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;
}
DSA-Webspezialisten
quelle
6

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 diese kombinieren)

FP
quelle
2
Die letztere Option zentriert nicht die Listenelemente, sondern nur deren Inline-Inhalt.
Quentin
Trotzdem, wenn die <li>nicht gestylt sind, sieht es genauso aus.
FP
4

Um ein Blockobjekt (z. B. das ul) zu zentrieren, müssen Sie eine Breite festlegen. Anschließend können Sie den linken und rechten Rand dieser Objekte auf automatisch setzen.

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

anddoutoi
quelle
1

Versuchen

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

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

Jonny Haynes
quelle
1

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

Das Problem jetzt: Die Ul braucht eine feste Breite, um tatsächlich in der Mitte zu sitzen. Wie auch immer wir es relativ zur Containerbreite (oder dynamisch) sein wollen, Rand: 0 Auto auf der ul funktioniert nicht.

Gehen von UL / Li Liste Ein besserer Weg ist zu lassen und einen anderen Ansatz verwenden Beispiel hier

Plippie
quelle
0

Wenn Sie die Breite des kennen ul, können Sie einfach den Rand des ulbis einstellen0 auto;

Dadurch wird das ulin der Mitte des enthaltenen Div ausgerichtet

Beispiel:

HTML:

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

CSS:

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

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;
}
Adam Boostani
quelle
0

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

Ich habe nach dem gleichen Fall gesucht und alle Antworten durch Ändern der Breite von versucht <li>.
Leider gelang es nicht allen, links und rechts von der <ul>Box den gleichen Abstand zu erreichen .

Die engste Übereinstimmung ist diese Antwort, aber sie muss die Änderung der Breite mit der Polsterung anpassen

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

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

Siehe das Ergebnis unten, alle Abstände zwischen <li>auch zur <ul>Box sind gleich.Geben Sie hier die Bildbeschreibung ein

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

Chetabahana
quelle
-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 Mama
quelle
-4

benutze oldschool center-tags

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

:-)

justastefan
quelle
Sie sollten die Verwendung von Stilausdrücken im Markup-Code vermeiden. Dafür wurde CSS gemacht!
FP
1
Funktioniert, aber beachten Siecenter
Folgendes
4
seufzen W3Schools liefert wie gewohnt unvollständige, falsche Informationen. Es wurde in 4.0 nicht 4.01 veraltet und erscheint in keiner Strict-Variante (das Herausgreifen von XHTML 1.0 ist eine seltsame Wahl).
Quentin
Wie bereits erwähnt, waren diese in HTML 4.01 veraltet ... auch das ist nur eine schlechte Praxis ...
Jonny Haynes
2
Ja, er sollte diese Art von Tag nicht verwenden, aber dies ist kein Grund, eine negative Antwort zu verdienen. Manchmal wollen wir die fetteste Lösung. Und für mich ist diese Antwort positiv.
Workdreamer