How to center align text in navigation bar of website in CSS?

html css navigation

106,269

Solution 1

You need to take the float:left off of both your #nav and li elements. Then add display:inline-block; to both. Next add your text-align:center to the #nav.

 #nav {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    margin-left: 0px;  // looks like bootstrap is putting a left margin on your #nav you may want it off.

}
#nav li {
   display: inline-block;
   text-align:center; 
}

Solution 2

Use this CSS:

Take the floats off, use display:inline-block to put the lis beside each other, and use text-align:center on the #nav. Is this what you're looking for?

body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #425eb4;
}

* {
    margin: 0 auto;
}

#wrap {
    height: 150px;
    background: url(images/header1.png) no-repeat center;
    text-align: center;
    background-color: #FFF;
}

#nav {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

#nav li {
    display: inline-block;
    text-align: center;
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    text-align: center;
    background-color: #fff;
}

/* End navigation bar styling. */
#content {
    padding: 0 50px 50px;
    width: 1000px;
    height: 800px;
    background-color: #FFF;
}

106,269

Author by

user2602766

Updated on May 19, 2020

Comments

user2602766 almost 4 years

I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.

HTML:

<body>
<div id="wrap">
</div>
   <ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>
<div id="content">
</div>
</body>

CSS:

body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#425eb4;
}
*{
    margin: 0 auto 0 auto;
}

#wrap {
    height:150px;
    background:url(images/header1.png) no-repeat center;
    text-align:center;
    background-color:#FFF;
}

#nav {
    width: 100%;
    float: left;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; }
#nav li {
    float: left;
    text-align:center; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    text-align:center;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    text-align:center;
    background-color: #fff;}
    /* End navigation bar styling. */

#content {
    padding: 0 50px 50px;
    width:1000px;
    height:800px;
    background-color:#FFF;
}

Trevor over 10 years

@user2602766 please mark an answer as accepted if it answered your question, otherwise give feedback on what is not resolved. Thanks