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

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>

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.

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.

Ich liebe Flexbox:

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

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>

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

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)

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;.

Versuchen

div#divID ul {margin:0 auto;}

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

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

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

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

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

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.

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

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

benutze oldschool center-tags

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

:-)