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

148

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?

Steven
quelle
Den Text in jedem LI zentrieren oder den UL innerhalb des DIV zentrieren?
Joop

Antworten:

130

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>

reisio
quelle
9
Könnten Sie dieser Antwort bitte Code oder Kontext hinzufügen, um zu verhindern, dass Links verrotten?
Nightfirecat
Die Lösung funktioniert hervorragend und es tut mir leid, das nach so langer Zeit zu fragen, aber was ist, wenn ich ein CSS-Dropdown habe? Ich kann keinen Überlauf verwenden: dann im übergeordneten Element versteckt. Aber es wird immer noch so überlaufen wie hier: homeafrika.com .
Samia Ruponti
Auf dieser Site wird kein Überlauf angezeigt. Ich bin mir nicht sicher, ob Sie den Überlauf brauchen: versteckt; Trotzdem, da es sich um einen horizontalen Überlauf handelt, können Sie immer versuchen, overflow-x: hidden; stattdessen. webchat.freenode.net/?nick=oerflowono&channels=#websites für Unterstützung in Echtzeit.
Reisio
1
Die Lösung zentriert das Menü gut, aber wenn Sie Untermenüs haben, die beim Schweben an einer bestimmten festen Position geöffnet werden sollen, sind Sie zum Scheitern verurteilt, da das position: relativeHauptmenü das Verhalten des position:absoluteUntermenüs ändert .
Cweiske
1
@reisio Wo ist die #buttonsID in der Frage von OP? Wo in Ihrer Antwort steht, dass er es benutzen muss? Wie kann dies akzeptiert und als Antwort mit der höchsten Bewertung gewählt werden, wenn Sie die Frage tatsächlich nicht beantworten und nur einige Off-Topic-Bla-Bla von einem Link zitieren?
Trejder
90

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>

Robusto
quelle
2
stimme @cweiske zu. Einfach mit einem Text-Align: Center auf dem enthaltenen Div löste das Problem für mich
Kim Stacks
Sie müssen nur sicherstellen, dass jeder Text darin einentext-align: left;
Juan Mendes
Das ist schön! Die ul hat jedoch standardmäßig links eine Auffüllung, was bedeutet, dass das Menü rechts von der Mitte verschoben ist. Sie müssen die Standardauffüllung aus der ul mit padding-left entfernen: 0;
Iterative Zigeuner
1
Perfekt eine bessere Antwort als die akzeptierte Lösung, Verwendung von Display: Inline macht den Trick. Verwenden Sie nicht float, es ist zu kompliziert. Vielen Dank für die Erkenntnisse @Robusto
Clain Dsilva
Textausrichtungszentrum
75

Mit CSS3 Flexbox. Einfach.

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

ul li {
  padding: 0 8px;
}
Daishi Nakajima
quelle
6
Ich würde diese Methode auf jeden Fall empfehlen
Caras
1
Auch ich würde diese Methode über die gewählte Antwort empfehlen.
Mickburkejnr
Ich besitze dir ein Bier!
Suyash Dixit
Ich muss sagen, dass ich noch nie zuvor Flex verwendet habe, um Inhalte zu rechtfertigen. Ausgezeichnete Antwort
Gman
Große Antwort beero
Ilyas karim
20

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>

Shawin
quelle
2

Versuche dies:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
Sarfraz
quelle
1
Das funktioniert, um die UL zu zentrieren. Aber das <LI> schwebt immer noch links. Ich möchte, dass das <LI> innerhalb des <UL> zentriert ist. Ist es möglich?
Steven
2

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

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;
}
Neal Ganslaw
quelle
2

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.

Grantex
quelle
1

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 (".").

Richard JP Le Guen
quelle
1

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

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

ruifn
quelle
0

@ 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;
}
Xanderoid
quelle
0
ul{margin-left:33%}

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

Jon
quelle
-2
.topmenu-design
{
    display: inline-table;
}

Das alles!

Сатанист Васькин
quelle