UL zentrieren

Tanja · 9. Februar 2018

Hallo!

Versuche meine Navigation (ul) zu zentrieren. Habe schon versucht nav-Element selbst zu zentrieren sowie nav ul zu zentrieren, nichts scheint zu funktionieren.

Die Klassenselektoren im HTML-Code sind für ein Drop-Down-Menü, also nicht zu berücksichtigen. CSS des Drop-Down-Menü sollte CSS der Website nicht beeinflussen.

War zumindestens bis jetzt immer so.

HTML

<nav class="mainMenu">
        <label for="toggleMenu" class="menuTitle">
            <img src="images/Logo.png" alt="Logo" />
        </label>
        <input type="checkbox" id="toggleMenu" />
            
          <ul class="menu">
            <li><a href="#">Startseite</a></li>
            <li><a href="pages/galerie.html">Galerie</a></li>
            <li><a href="pages/team.html">Team</a></li>
            <li><a href="pages/gaestebuch.html">Gästebuch</a></li>
            <li><a href="pages/kontakt.html">Kontakt</a></li>
          </ul> 
</nav>

Alles anzeigen

CSS

nav {
    background-color:#FFF;
    width:98%;
}

nav ul {
    text-align:center;    
}

nav ul li {
    display:inline;
    list-style:none;
}

nav ul li a {
    text-align:center;
    text-decoration:none;
    margin:2%;
    color:#000;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

Alles anzeigen

Wäre sehr dankbar für einige Vorschläge und Hilfestellungen.

Tanja

basti1012 · 9. Februar 2018

Was meinst du mit zentrieren? Wie soll das den aussehen? Soll das menü neben den Logo sein? Darunter und mittig? oder wie ? Was hast du den mit der Checkbox im menü vor?

Tanja · 10. Februar 2018

Darunter und mittig wäre der Wunsch.

Das mit der Checkbox ist eine voreingestellte & eingebundene Version eines Toggle Menüs. Haben dieselbe Version des Drop-Down-Menüs auch schon in der Schule verwendet & diese ändert nichts an selbst erstellten CSS-Datei der Website.

Tanja · 10. Februar 2018

Es geht aber wirklich nur um die Navigation, mit dem Logo funktioniert alles.

Stef · 10. Februar 2018

Hey.

hier ist ein Beispiel.

Du musst das text-align: center nur auf ul anwenden. Denn li und a ist ja kein Blockelement sondern ein Inline-Element.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navbar</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #navigation{
            background-color: red;
        }

        #navigation .menu{
            padding: 2%;
            list-style-type: none;
            text-align: center;
        }

        #navigation .menu li{
            display: inline-block;
        }
    </style>
</head>
<body>
    <header>
        <h1>Navigation zentriert</h1>
    </header>
    <main>
        <nav id="navigation">
            <ul class="menu">
                <li><a href="#">Startseite</a></li>
                <li><a href="#">Galerie</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Gästebuch</a></li>
                <li><a href="#">Kontakt</a></li>
              </ul> 
        </nav>
    </main>
</body>
</html>

Alles anzeigen

UL zentrieren

Jetzt mitmachen!

Teilen