CODEWITHSUNDEEP
htmlcss
dawed1999
dawed1999

Reputation: 335

Tabs at the top of the page not aligned properly

I'm trying build a news website but im having a problem with centering the tabs at the top of th page. Can anyone give me some tips on how to fix this and also explain(I'm new to web development). Thanks in advance.

ul{list-style-type: none;
        text-align: center;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        background-color: #333333;}

        li{float: right;
        margin: 0 auto;
        border-right: 1px solid black;
        border-bottom: 1px solid black}

        li a{display: inline-block;
        background-color: #333333;
        color: white;
        text-align: center;
        padding: 10px;
        text-decoration: none;}

        li a:hover {background-color: black;}
  <ul role="menubar">
    <li></li>
    <li><a href="#news">News</a></li>
    <li><a href="#sport">Sports</a></li>
    <li><a href="#business">Business</a></li>
    <li><a href="#TV">TV</a></li>
    <li><a href="#car">Automobiles</a></li>
    <li><a href="#culture">Culture</a></li>
    <li><a href="#fashion">Fashion</a></li>
    <li><a href="#food">Food</a></li>
    <li><a href="#health">Healthcare</a></li>
    <li><a href="#tourism">Tourism</a></li>
    <li><a href="#TECH">TECH</a></li>
  </ul>

Upvotes: 0

Views: 46

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

change your li's to display: inline-block and remove float: right. That will allow text-align: center on the parent ul to center to work.

ul{
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}
li{
    display: inline-block;
    margin: 0 auto;
    border-right: 1px solid black;
    border-bottom: 1px solid black
}
li a{
    display: inline-block;
    background-color: #333333;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}
li a:hover{background-color: black;}
<ul role="menubar">
    <li></li><li><a href="#news">News</a></li><li><a href="#sport">Sports</a></li><li><a href="#business">Business</a></li><li><a href="#TV">TV</a></li><li><a href="#car">Automobiles</a></li><li><a href="#culture">Culture</a></li><li><a href="#fashion">Fashion</a></li><li><a href="#food">Food</a></li><li><a href="#health">Healthcare</a></li><li><a href="#tourism">Tourism</a></li><li><a href="#TECH">TECH</a></li>
</ul>

Upvotes: 2

Related Questions