Wie zentriere ich das horizontale <UL> -Menü?

Ich muss ein horizontales Menü zentrieren.
Ich habe verschiedene Lösungen ausprobiert, einschließlich der Mischung aus inline-block/block / center-alignusw., aber es ist mir nicht gelungen.

Hier ist mein Code:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

AKTUALISIEREN

Ich weiß, wie man das ulinnerhalb des zentriert div. Dies kann mit Sarfraz 'Vorschlag erreicht werden. Die Listenelemente werden jedoch weiterhin in der Liste angezeigt ul.

Benötige ich Javascript, um dies zu erreichen?

Von http://pmob.co.uk/pob/centred-float.htm :

Die Prämisse ist einfach und beinhaltet im Grunde nur einen breitlosen Float-Wrapper, der nach links schwebt und dann vom Bildschirm in die linke Breitenposition verschoben wird: relativ; links: -50%. Als nächstes wird das verschachtelte innere Element umgekehrt und eine relative Position von + 50% angewendet. Dies hat zur Folge, dass das Element tot in der Mitte platziert wird. Die relative Positionierung hält den Fluss aufrecht und lässt andere Inhalte darunter fließen.

Code

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

Das funktioniert bei mir. Wenn ich Ihre Frage nicht falsch verstanden habe, können Sie es versuchen.

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Mit CSS3 Flexbox. Einfach.

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

ul li {
  padding: 0 8px;
}

Dies ist der einfachste Weg, den ich gefunden habe. Ich habe dein HTML benutzt. Das Auffüllen dient nur zum Zurücksetzen der Browser-Standardeinstellungen.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

Hier ist ein guter Artikel darüber, wie man es auf eine ziemlich solide Art und Weise macht, ohne Hacks und volle browserübergreifende Unterstützung. Funktioniert bei mir:

-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Versuche dies:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

Mach es so :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

Und das CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

Wie so viele von Ihnen habe ich eine Weile damit zu kämpfen. Die Lösung hatte letztendlich mit dem Div zu tun, das das UL enthielt. Alle Vorschläge zum Ändern der Polsterung, Breite usw. des UL hatten keine Auswirkung, die folgenden jedoch.

Es dreht sich alles um die margin:0 auto;auf dem enthaltenen div. Ich hoffe, dass dies einigen Menschen hilft, und danke an alle anderen, die dies bereits in Kombination mit anderen Dingen vorgeschlagen haben.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}

Demo - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Omg so viel sauberer.

Im Allgemeinen wird zum Zentrieren eines Schwarzpegelelements (wie a <ul>) das verwendetmargin:auto; Eigenschaft .

Verwenden Sie zum Ausrichten von Text- und Inline-Ebenenelementen innerhalb eines Blockebenenelements text-align:center;. Also alles zusammen so etwas wie ...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... sollte arbeiten.

Der Randfall ist Internet Explorer6 ... oder sogar andere IEs, wenn Sie a nicht verwenden <!DOCTYPE>. IE6 richtet Blockelementelemente mit falsch aus text-align. Wenn Sie also IE6 unterstützen möchten (oder a nicht verwenden <!DOCTYPE>), ist Ihre vollständige Lösung ...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

Als Fußnote halte ich es für id="topmenu firstlevel"ungültig, da ein idAttribut keine Leerzeichen enthalten kann ...? In der Tat definiert die w3c-Empfehlung das idAttribut als ' Name' -Typ ...

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

Ich habe die Eigenschaft display: inline-block verwendet: Die Lösung besteht darin, einen Wrapper mit fester Breite zu verwenden. Im Inneren befindet sich der ul-Block mit dem Inline-Block zur Anzeige. Damit nimmt die ul nur die Breite für den eigentlichen Inhalt! und schließlich margin: 0 auto, um diesen Inline-Block zu zentrieren =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

Ich benutze JQuery-Code für diese. (Alternative Lösung)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul als Inline-Tabelle behebt das Problem mit. Ich habe das übergeordnete div verwendet, um den Text auf die Mitte auszurichten. Auf diese Weise sieht es auch in anderen Sprachen gut aus (Übersetzung, andere Breite)

@ Robustos Lösung war die einfachste für das, was ich versucht habe. Ich schlage vor, Sie verwenden sie. Ich habe versucht, dasselbe für Bilder in einer ungeordneten Liste zu tun, um eine Galerie zu erstellen ... Ich habe eine js-Geige gemacht, um damit herumzuspielen. Fühlen sich frei es hier aus.

[Es wurde mit Robustos Beispielcode eingerichtet]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

CSS:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

ul{margin-left:33%}

Ist eine anständige Annäherung auf großen Bildschirmen. Es ist nicht gut, aber eine gute schmutzige Lösung.

.topmenu-design
{
    display: inline-table;
}

Das alles!