Hvordan pokker centrer jeg indholdet af denne nav på siden? Så navigations menuen er i midten af skærmen.
Kode: Vælg alt
<html>
<head>
<title>Navigation menu test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/CSS-reset.css"/>
<style>
nav {
height: 50px;
width: 100%;
background-color: red;
font-size: 30px;
}
nav ul {
height: auto;
width: 100%;
padding: 7px 0px;
text-align: center;
}
nav ul li {
display: inline;
float: left;
}
nav ul li a {
text-decoration: none;
padding: 8px 10px;
}
nav ul li a:hover {
background-color: hsla(0, 0%, 0%, .8);
}
</style>
</head>
<body>
<main>
<nav>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
</ul>
</nav>
</main>
</body>
</html>
