Problem bei Zentrierung einer Liste (ul, li)

Deforner

Hey ich hoffe ihr könnt mir helfen. Ich hab eine einfache Liste in einem Div, und diese soll zentriert im Div vorliegen, jedoch schaffe ich es nicht diese zu zentrieren. Vielleicht kann mir ja einer helfen (die Ränder sind nur zur Übersicht für mich).

HTML

<html>
<header>
<style type="text/css">
#navigation {
    margin: 0 auto;
    height: 80px;
    border-style: solid;
    width: 800px
}
    #navigation ul {
        padding: 0px;
        margin: 0px;
    }
    #navigation li {
        list-style: none;
        float: left;
        text-align: center;
        border-style: solid;
        width: 120px;
    }
</style>
</header>
<body>
<div id="navigation">
<ul>
<li>
<p>Home</p>
</li>
<li>
<p>Massage</p>
</li>
<li>
<p>Bodywrapping</p>
</li>
<li>
<p>Angebot</p>
</li>
<li>
<p>Kontakt</p>
</li>
</ul>
</div>
</body>
</html>

Alles anzeigen

explanator

du musst das Ul-Element zentrieren mit margin:0 auto siehe hier

Code

#navigation ul {
        padding: 0px;
        margin: 0px auto;
    }

Die Li-Elemente kannst du ja nicht zentrieren, da sie ja gefloatet sind.

Deforner

Danke sehr, aber würde die Liste gerne vertikal haben also alles nebeneinander. Ohne das Float ist alles untereinander

explanator

Gib dem UL eine Breite, dann kannst du es zentrieren.

Beipiel:

Code

#navigation ul {
    padding: 0px;
    margin: 0px auto;
    width: 630px;
}

Grevas

Wenn man ein wenig auf "modernere" browser setzt (in dem Fall diejenigen die "inline-block" kennen), dann braucht man keine Breite beim <ul>.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">


  <title></title>
  <style type="text/css">
    #navigation {
        margin: 0 auto;
        height: 80px;
        border-style: solid;
        width: 800px
    }
    #navigation ul {
        padding: 0px;
        text-align: center;

    }
    #navigation li {
        list-style: none;
        display: inline-block;
        text-align: center;
        border-style: solid;
        width: 120px;
    }
  </style>
</head>


<body>
  <div id="navigation">
    <ul>
      <li>
        <p>Home</p>
      </li>


      <li>
        <p>Massage</p>
      </li>


      <li>
        <p>Bodywrapping</p>
      </li>


      <li>
        <p>Angebot</p>
      </li>


      <li>
        <p>Kontakt</p>
      </li>
    </ul>
  </div>
</body>
</html>

Alles anzeigen

Ja ich habe mir erlaubt daraus valides HTML zu machen + tidy html drüber gejagt zur Formatierung.

Tags