CODEWITHSUNDEEP
htmlcss
Grant9196
Grant9196

Reputation: 139

Navigation bar align in middle

Is there a way to get this navigation bar to always been in the middle of the page? I'm sure using percentages will be the best way. I added in which line I think needs changing. I'm just trying to get used to CSS. Any help would be appreciated.

<!DOCTYPE html>
<html>
<head>
<style>
.menu {
    position:absolute; 
    background:#CCC;
    width:100%; 
    top:100px; 
    left:0; 
    height:23px; 
    padding: 0;
    text-align:center;
    font-size:20px;
    font-weight:light;
}

.ty-menu__items {
    position: absolute;
    left:20%;              /* This is the line that needs changing, I think*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
}

.ty-menu__item {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 200px;
    font-weight: light;
    color: #FFF;
    background: #CCC;
    text-align: center;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background: #000;
    border-bottom: 4px solid #fff;
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
  <li class="ty-menu__item"><a href="#home">Home</a></li>
  <li class="ty-menu__item"><a href="#news">News</a></li>
  <li class="ty-menu__item"><a href="#contact">Contact</a></li>
  <li class="ty-menu__item"><a href="#about">About</a></li>
</ul>
</div>
</body>

</html>

Upvotes: 0

Views: 38

Answers (1)

Ben Fried
Ben Fried

Reputation: 2204

Remove the left property from your ul, then remove the float property from your li's, and instead make the li's display: inline-block; so you can simply text-align: center; them. Code below:

.ty-menu__items {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
}

Upvotes: 2

Related Questions