it-swarm.com.de

Können Sie mir helfen, ein <ul> -Element mit CSS zu zentrieren?

Ich habe über etwas gerätselt, das eigentlich sehr einfach sein sollte, aber nach drei erfolglosen Stunden habe ich es noch nicht gelöst:

Ein Freund hat mich gebeten, die Vorlage von seiner WordPress website so zu korrigieren, dass die horizontale Navigationsmenüleiste horizontal auf der Seite zentriert ist. Er möchte, dass sie genau passt Unten in der Mitte des roten Abschnitts - dann würde es einfach zwischen die beiden Embleme auf beiden Seiten der roten Seite passen.

Der rote Abschnitt (class="header") hat text-align auf center gesetzt. Dies scheint gut genug zu sein, um sicherzustellen, dass Titel und Beschreibungstext mittig ausgerichtet sind, aber aus irgendeinem Grund kann ich das Menü (bei dem es sich um ein ul handelt) nicht mittig auf der Seite ausrichten.

Möchte jemand vorschlagen, was ich falsch mache? Warum kann ich das Menü nicht zentrieren? Was muss ich im Stylesheet ändern, damit es funktioniert?

49
Salim Fadhley

Um eine Reihe von Blöcken zu zentrieren, sollten Sie den Inline-Block verwenden:

ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }

IE versteht Inline-Block nicht, aber wenn Sie es nur für IE inline setzen, verhält es sich immer noch wie ein Inline-Block:

<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->
74
Andrew Vit

1 Schreibe style="text-align: center;" an übergeordnetes div von ul

2 Schreibe style="display: inline-table;" bis ul

2 Schreibe style=" display: inline;" bis li

<div class="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
  </ul>
</div>

<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>

Fertig

34
Dashrath

angegebene Breite für ul ul{ width:700px; margin:0 auto;}

Am besten geht das so:

Wickeln Sie die ul in ein neues div id = "topmenu" oder ähnliches und geben Sie diesem dann die folgenden Stile

bottom:0;
position:absolute;
width:780px;

und gib dem ul.menu dies

margin:0 auto;
width:535px;

Das einzige Problem hierbei ist, dass Sie die Breite der Menüliste festlegen. Wenn sich die Breite der Menüelemente ändert, muss dies auch in der CSS-Datei geändert werden (dh, wenn ein neues Menüelement hinzugefügt wird).

PDATE: Ich habe gerade Ihren Kommentar darüber bemerkt, dass die Breite nicht manuell eingestellt wurde. Wenn Sie bereit sind, ein bisschen Javascript zu verwenden, können Sie dies in den dokumentenfertigen Block einfügen und den width: 535px; - Code entfernen.

var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);

Dadurch wird die Eigenschaft css width nach dem Laden der Seite auf die tatsächlich gerenderte Breite gesetzt, sodass das Layout funktioniert.

Vollständiger HTML-Code:

<div id="header">
    <h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
    <p class="description">A Website by Frank Key</p>
    <div id="topmenu">
        <ul class="menu">
        <li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>      
        <li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
        <li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>    
    </ul>
</div>
</div>
0
Glenn Slaven