CODEWITHSUNDEEP
htmlcss
user2710234
user2710234

Reputation: 3225

centering links on css menu (horizontal)

i have this css:

.vertical-nav {
    height:35px;;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin-top:0;
    margin-bottom:35px;
    padding:0;
    background:#03F;
}
.vertical-nav li {
    height: 25px;
    margin: 0;
    text-align:center;
    padding: 5px 0;
    background-color: #03F;
    border: none;
    display: inline-block;
    float: left;
    width: 120px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
    background-color:#000000;
    color:#FFFFFF;
}
.vertical-nav li a {
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#000000;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}
vertical-nav ul li ul {
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul {
    display:block;
}
vertical-nav ul li:hover ul li {
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover {
    background-color:#333333;
}
vertical-nav ul li ul li a {
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
    text-decoration:none;
}
.vertical-nav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}
.vertical-nav li:hover ul {
    display: block;
}
.vertical-nav li:hover .sub-menu
{
    display: table;
}
.sub-menu li
{
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    display:table-row;
    z-index:1;
    position:relative;
}
.sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

the menu is 100% width of the page so i need to get the links centred in the page

here is a jsFiddle so you can see the HTML Too and the fully functional menu: http://jsfiddle.net/rspc3/

Upvotes: 1

Views: 754

Answers (3)

Rivers
Rivers

Reputation: 2102

Replace your CSS with:

.vertical-nav {
    height:35px;;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin-top:0;
    margin-bottom:35px;
    padding:0;
    background:#03F;
    text-align:center;
    padding-top:10px;
}
.vertical-nav li {
    height: 25px;
    margin: 0;
    text-align:center;
    padding: 5px 0;
    background-color: #03F;
    border: none;
    display: inline;
    float: none;
    margin:0px 30px 0px 0px;
    width: 120px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
    background-color:#000000;
    color:#FFFFFF;
}
.vertical-nav li a {
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#000000;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}
vertical-nav ul li ul {
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul {
    display:block;
}
vertical-nav ul li:hover ul li {
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover {
    background-color:#333333;
}
vertical-nav ul li ul li a {
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
    text-decoration:none;
}
.vertical-nav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}
.vertical-nav li:hover ul {
    display: block;
}
.vertical-nav li:hover .sub-menu
{
    display: table;
}
.sub-menu li
{
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    display:table-row;
    z-index:1;
    position:relative;
}
.sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

Upvotes: 0

j08691
j08691

Reputation: 207900

Move the text-align:center; rule from .vertical-nav li to .vertical-nav and remove the float: left; on .vertical-nav li

jsFiddle example

Upvotes: 1

saad arshad
saad arshad

Reputation: 259

this will work perfectly

 <ul id="nav">
    <li><a href="/">Link 1</a></li>
    <li><a href="/about/">Link 2</a></li>
    <li><a href="/portfolio/">Link 3</a></li>
</ul>

#nav{
  border:1px solid #ccc; 
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}

#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

Upvotes: 0

Related Questions