2

I am needing to vertically and horizontally align the text to the center of the nav div. I will provide both the HTML and CSS down below.

Here is the HTML portion of the code.

<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 portion of the code.

@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;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Sagelane
  • 27
  • 2
  • text-align: center in parent element for centering text and line-height: 1.2 or similar on p or heading for vertical adjustment – jan199674 Sep 22 '14 at 16:06

1 Answers1

1

Add display: table and text-align: center to #nav element:

@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;
    display: table;/*Add display table*/
    text-align: center;/*Add text-align center*/
}
#nav li {
    list-style: none;
    display: inline;
    text-align: center;
    
}
#nav li:hover {
    opacity: .6;
}
<div id="nav">
    <ul>
        <li>Home</li>
        <li>Music</li>
        <li>Blog</li>
        <li>Shop</li>
        <li>Contact</li>
    </ul>
</div>
Alex Char
  • 32,879
  • 9
  • 49
  • 70