CODEWITHSUNDEEP
htmlcss
lmgguy
lmgguy

Reputation: 89

How to center the ul in the HTML

I have this html and CSS code on which I have spent the last 3 hrs and I am still not able to figure out how to center align the top menu bar in my code. The code is as follows:

#container ul {
  list-style: none;
  margin: auto;
  padding: 0;
}

#container ul li a {
  color: #FFFFFF;
}

#container ul li {
  background-color: #6068FF;
  width: 180px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  align-items: center;
  color: #FFFFFF;
  font-size: 18;
}

#container ul li:hover {
  background-color: #0BF5F5;
}
<div id="container">
  <ul>
    <li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
    <li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
    <li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
    <li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
  </ul>
</div>

Upvotes: 0

Views: 107

Answers (5)

Arjan Knol
Arjan Knol

Reputation: 940

Add inline-block to the list and use text-align:center; on the #container

#container {
  text-align: center;
}

#container ul {
  list-style: none;
  margin: auto;
  padding: 0;
  display: inline-block;
}

#container ul li a {
  color: #FFFFFF;
}

#container ul li {
  background-color: #6068FF;
  width: 180px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  align-items: center;
  color: #FFFFFF;
  font-size: 18;
}

#container ul li:hover {
  background-color: #0BF5F5;
}
<div id="container">
  <ul>
    <li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
    <li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
    <li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
    <li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
  </ul>
</div>

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Use flexbox for this:

#container {
  display: flex; /* new */
}

#container ul {
  list-style: none;
  margin: auto;
  padding: 0;  
}

#container ul li a {
  color: #FFFFFF;
}

#container ul li {
  background-color: #6068FF;
  width: 180px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  align-items: center;
  color: #FFFFFF;
  font-size: 18;
}

#container ul li:hover {
  background-color: #0BF5F5;
}
<div id="container">
  <ul>
    <li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
    <li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
    <li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
    <li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
  </ul>
</div>

Upvotes: 1

Den Isahac
Den Isahac

Reputation: 1525

Here's your updated CSS:

Added text-align: center on the <ul> tag.

#container ul {
    ...
    text-align: center;
}

Removed float: left, and added display: inline-block on <li> tags.

#container ul li {
   display: inline-block;
   ...
   /* float: left; */
}

Upvotes: 1

Tuan
Tuan

Reputation: 2363

Here's your code without the float:left;

   #container ul {
        list-style:none;
        margin:auto;
        padding: 0;             
    }

    #container ul li a{
        color:#FFFFFF;          
    }   
    #container ul li{
        background-color:#6068FF;
        width:180px;
        border:1px solid white;
        height:50px;
        line-height:50px;
        text-align:center;
        #float:left;
        align-items:center;
        color:#FFFFFF;
        font-size:18;   
    }

    #container ul li:hover{
        background-color:#0BF5F5;
    }
<div id="container">
  <ul>
  <li><a style="text-decoration:none;"href="default.asp">Student Attendance</a></li>
  <li><a style="text-decoration:none;"href="news.asp">Edit Students</a></li>
  <li><a style="text-decoration:none;"href="contact.asp">Profile</a></li>
  <li><a style="text-decoration:none;"href="about.asp">Logout</a></li>
</ul>
</div>

Upvotes: 0

Lars Beck
Lars Beck

Reputation: 3584

You either need to display the list as an inline element or give it a fixed with, otherwise it always will take full available horizontal space.

#container ul {
    display: inline-block;
    list-style:none;
    margin:auto;
    padding: 0;             
}

/* or */

#container ul {
    width: 50%; /* whatever */
    list-style:none;
    margin:auto;
    padding: 0;             
}

Upvotes: 0

Related Questions