NAvigation in der Mitte zentrieren

jgk16 · 9. Februar 2017

Guten Tag,

in einer CSS Datei ist die Hauptnavigation linsbündig beschrieben.

Ich möchte Sie in der Mitte zentrieren und suche nun den Befehl den ich für "left einsetze.

Weiss jemand weiteR?

CSS mit linksbündiger zentrierung

nav {
float: left;
width: 100%;
list-style-type: none;
box-shadow: 0 10px 5px 0 rgba(0,0,0,0.75);
position: absolute;
top: -11px; left:0%;
display: block;
text-align: center;
margin: 0 auto 30px;
}
nav ul {
float: left;
width: 100%;
list-style-type: none;
background: #7C2D48;
}
nav ul li {
float: left;
}
nav ul li:first-child {
margin-left: 2%;
}
nav ul li a {
float: left;
padding: 16px 0 16px 16px;
color: #FFFFFF;
text-decoration: none;
}
nav ul li a:after {
content:" | ";
color: #ffa323;
margin-left: 20px;
}
nav li a:hover, nav li a:focus {
background: #6D273F;
}

also was schreibe ich anstatt left???

MfG

jgk16 · 9. Februar 2017

unter margin left kann ich den abstand herausfinden.

gerade herausgefunden

also anstatt 2%

zb 25%

djheke · 9. Februar 2017

Versuch es mal so

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal zentrierte Navigation bei unbekanner Größe</title>
<style type="text/css">
* {
 list-style:none;
 text-decoration:none;
 margin:0;
 padding:0;
}




nav {
 text-align:center;
 box-shadow: 0 0 10px #000;
 background: #7C2D48;
}




nav ul {
 display:inline-block;
 background:#ffa323;
}
nav li {
 display:inline-block;
 color:#fff;
 margin-left:-3px; /* Die nicht benötigten Außenabstände(ca. 4px uner Windows) von -display:inline-block- korrigieren */
}




nav a {
 display:block;
 padding:10px;
 color:#fff;
 background: #7C2D48;
}




nav a:hover {
 background:#6D273F
}
</style>

</head>
<body>




<nav> 
   <ul id="navi">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Anbieterkennzeichnung</a></li>
    <li><a href="#">Block</a></li>
   </ul>
</nav>




</body>
</html>

Alles anzeigen

NAvigation in der Mitte zentrieren

Jetzt mitmachen!

Teilen