I need to center the text vertically and horizontally in the nav div. Below are both the HTML and CSS code snippets.
Here is the HTML snippet:
<html>
<head>
</head>
<title>
Dom Chronicles
</title>
<body>
<div id="header">
</div>
<div id="space">
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Music</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Here is the CSS snippet:
@font-face {
font-family: Mager;
src: url(fonts/ElegantLux-Mager.otf);
}
#header {
width: 1000px;
height: 400px;
margin: 0 auto;
background-color: gray;
}
#space {
width: 1000px;
height: 10px;
}
#nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background-color: gray;
color: black;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
display: inline;
text-align: center;
}
#nav li:hover {
opacity: .6;
}