it-swarm.com.de

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-align usw., aber es ist 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>

UPDATE

Ich kann das ul innerhalb des div zentrieren. Dies kann durch den Vorschlag von Sarfraz erreicht werden. Die Listenelemente werden jedoch weiterhin in der Variablen ul angezeigt.

Benötige ich Javascript, um dies zu erreichen?

145
Steven

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

Die Prämisse ist einfach und beinhaltet im Wesentlichen nur einen in der Breite schwebenden Wickler, der nach links geschoben wird und dann vom Bildschirm in die linke Breitenposition verschoben wird: links: -50%. Als nächstes wird das verschachtelte innere Element umgekehrt und eine relative Position von + 50% wird angewendet. Dadurch wird das Element in der Mitte tot platziert. Durch die relative Positionierung bleibt der Fluss erhalten und andere Inhalte können 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>

131
reisio

Das funktioniert für mich. Wenn ich Ihre Frage nicht falsch verstanden habe, können Sie es vielleicht 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>

84
Robusto

Mit der CSS3-Flexbox. Einfach.

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

ul li {
  padding: 0 8px;
}
66
Daishi Nakajima

Dies ist der einfachste Weg, den ich gefunden habe. Ich habe deine HTML verwendet. Die Auffüllung dient nur zum Zurücksetzen der Browsereinstellungen.

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>

20
Shawin

Hier ist ein guter Artikel, wie man es auf ziemlich solide Weise ohne Hacks und volle Browser-Unterstützung macht. Funktioniert bei mir:

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

10
michaeldwp

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.

2
grantex

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

Es geht um denmargin:0 auto;des enthaltenden div. Ich hoffe, das hilft einigen Leuten und allen 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;
}
2
Neal Ganslaw

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;
}
2
Boris Guéry

Versuche dies:

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

Ich habe die Eigenschaft display: inline-block verwendet: Die Lösung besteht darin, einen Wrapper mit fester Breite zu verwenden. Im Inneren der ul-Block mit dem Inline-Block zur Anzeige. Damit nimmt das ul nur die Breite für den tatsächlichen 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;
}
1
David

Im Allgemeinen kann ein Schwarzwertelement (wie ein <ul>) mithilfe der margin:auto;-Eigenschaft zentriert werden.

Um Text- und Inline-Level-Elemente innerhalb eines Block-Level-Elements auszurichten, verwenden Sie 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 kein <!DOCTYPE> verwendet wird. IE6 richtet Elemente auf Blockebene falsch mit text-align aus. Wenn Sie also IE6 unterstützen möchten (oder keinen <!DOCTYPE> verwenden), 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 glaube ich, dass id="topmenu firstlevel" ungültig ist, da ein id-Attribut keine Leerzeichen enthalten darf ...? Tatsächlich definiert die Empfehlung w3c das id-Attribut als 'name'-Typ ...

ID- und NAME-Token müssen mit einem .__ beginnen. Buchstabe ([A-Za-z]) und kann gefolgt werden durch eine beliebige Anzahl von Buchstaben, Ziffern ([0-9]), Bindestriche ("-"), Unterstriche ("_"), Doppelpunkte (":") und Punkte (".").

1
ul{margin-left:33%}

Ist eine annehmbare Annäherung an große Bildschirme. Es ist nicht gut, aber eine gute schmutzige Lösung.

0
Jon

ich benutze dafür Jquery-Code. (Alternative Lösung)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
0
nixis
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 er auch in anderen Sprachen gut aus (Übersetzung, andere Breite)

0
ruifn

Die Lösung von @ Robusto war die einfachste für das, was ich versuchte, ich schlage vor, Sie verwenden es. 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 herumzualbern. Fühlen Sie sich frei, versuchen Sie es hier.

[es wurde mit dem Beispielcode von robusto 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;
}
0
xanderoid