stackoom
  简体   繁体   中英

How to align navbar to center with css

 原文  2015-02-20 13:44:59  0   8    html/ css/ nav

Question

I need help to align my navbar bar to center Here is my code What's wrong with it? It does not align the menu to the center. 

 #nav { position: absolute; left: 0px; height: 40px; background-color: #2C64B4; width: 100%; margin: 0 auto; } #nav ul { margin: 0; padding: 0; list-style-type: none; } #nav ul li { margin: 0; padding: 0; float: left; } #nav ul li a { text-decoration: none; padding: 10px 20px; display: block; color: #FFF; text-align: center; }
 <div id="nav"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">Blah</a> </li> <li><a href="#">exampl</a> </li> </ul> </div>

8 answers

solution1
 8 ACCPTED  2015-02-20 13:47:57

One way would be to set the display of #nav ul to inline-block . Then add text-align: center to the parent element in order to center the child ul :

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    text-align: center;
}
#nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

Alternatively, you could also set the display of the parent element, #nav to flex , and then add justify-content: center to center the child element horizontally.

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    display: flex;
    justify-content: center;
}

solution2
 2  2015-02-20 13:58:35

Not a big deal here.

Just add text-align:center to ul and make li display:inline-block

HTML 

<div id="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Blah</a>
        </li>
        <li><a href="#">exampl</a>
        </li>
    </ul>
</div>

CSS 

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
}
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#nav ul li {
    margin: 0;
    padding: 0;
    display: inline-block;
}
#nav ul li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #FFF;
    text-align: center;
}

Check in Fiddle

solution3
 1  2015-02-20 13:51:32

Update your css of ul as

#nav ul {
    margin: auto;
     padding: 0;
     overflow: hidden;
     width: 60%;
}

check fiddle:

http://jsfiddle.net/swapnilmotewar/7kk8knd0/2/

solution4
 1  2015-02-20 14:29:02

#nav {
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
    }   
#nav ul {
    margin: 0;
    padding: 0;
    text-align:center;
}
#nav ul li {
    margin: 0;
    padding: 0;
    display:inline-block;
    position: relative;
}
#nav ul li a {
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #FFF;
    text-align: center;     
    }

Use this CSS you will got solution. Add in Li relative position, if you require drop down for some categories

solution5
 0  2015-02-20 13:47:24

#nav ul {
    margin: auto;
    padding: 0;
}

solution6
 0  2015-02-20 13:50:10

You can set your ul to display: inline-block; and set text-align: center; to the parent nav:

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    text-align:center;
}   
#nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

solution7
 0  2015-02-20 14:02:09

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    margin: 0 auto;
    text-align:center;
}   
#nav ul {
   margin: auto;
     padding: 0;


  
 
  
  
 
   
 
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #nav {
        position: absolute;
        left: 0px;
        height: 40px;
        background-color: #2C64B4;
        width: 100%;
        margin: 0 auto;
    	text-align:center;
    }   
    #nav ul {
       margin: auto;
         padding: 0;
         overflow: hidden;
    	 display: inline-block;
    }
    #nav ul li {
        margin: 0;
        padding: 0;
        float:left;
    }
    #nav ul li a {
        text-decoration: none;
        padding: 10px 20px;
        display: block;
        color: #FFF;
        text-align: center;     
        }
    	</style>
    </head>

    <body>

    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Blah</a></li>
    <li><a href="#">exampl</a></li>
    </ul>
    </div>
    </body>
    </html>
 
   
 
  



     overflow: hidden;
     display: inline-block;
}

solution8
 0  2020-12-25 07:37:55

I did it like this it worked but u should also give class and arrange the mobile and desktop. Also I used for bootstrap.

      <nav class="navbar navbar-expand-lg navbar-light sticky-top" style="background-color:#fff;">
          <a class="navbar-brand" href="#">
            <img class="none" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Brabus_logo.svg/1200px-Brabus_logo.svg.png" width="140" height="70" alt="">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link none-1" href="index.php">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Brabus_logo.svg/1200px-Brabus_logo.svg.png" width="140" height="70" alt="">
                    </a>
              </li>     
              <li class="nav-item active">
                <a class="nav-link" href="hakkimizda.php">Hakkımızda</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="arac.php">Araçlarımız</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="iletisim.php">İletişim</a>
              </li>
            </ul>
          </div>
        </nav>
 <style type="text/css">
        @media screen and (max-width: 900px) {
      .none-1 {
        display: none;
      }
    }
    @media screen and (min-width: 900px) {
      .none {
        display: none;
      }
    }
    .navbar-collapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-align: center;
        align-items: center;
        place-content: center;
    }
    </style>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to align navbar to center Bootstrap 4 Navbar center align in CSS How to center align an ICON inside a BUTTON in materialize css navbar? CSS Navbar submenus how to center? How can I align buttons to the center of the navbar How to align an item in navbar to the center in HTML How to align the navbar in the center of container in boostrap 4 Center Align Links In Navbar? Align text to center of navbar How to align the center this menu?CSS
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM