CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2710234
user2710234

Reputation: 3225

CSS menu make links centre

I have this css for my horizontal menu:

nav {  
    height: 40px;  
    width: 100%;  
    background: #F00;  
    font-size: 11pt;  
    font-family: Arial;
    font-weight: bold;  
    position: relative;  
    border-bottom: 2px solid #FFFFFF;  
}  
nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
}
nav li {  
    display: inline;  
    float: left;  
}  
.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  
nav a {  
    color: #000000;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
}  
nav li a {  
    border-right: 1px solid #FFFFFF;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 0;  
}  
nav a:hover, nav a:active {  
    background-color: #000000;
    color:#FFFFFF;  
} 
nav a#pull {  
    display: none;  
}  
@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {  
        border-bottom: 1px solid #FFFFFF;  
        border-right: 1px solid #FFFFFF;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
}  
@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #FF0;  
        width: 100%;  
        position: relative;  
    }  
    nav a#pull:after {  
        content:"";  
        background: url('nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        rightright: 15px;  
        top: 10px;  
    }  
}  
@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #FFFFFF;  
    }  
}

how can i make the li links display in the centre?

here is a fiddle of the menu: http://jsfiddle.net/zJq52/

Upvotes: 3

Views: 154

Answers (7)

Ennui
Ennui

Reputation: 10190

Super simple.

Add text-align: center to nav ul and remove float: left from nav li.

nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
    text-align: center;
}
nav li {  
    display: inline;   
}

Here's an updated fiddle: http://jsfiddle.net/qwUF7/

Upvotes: -1

Ruddy
Ruddy

Reputation: 9923

I would do this:

nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
    text-align: center; // add text-align
}
nav li {  
    display: inline; // no more float in here 
}

DEMO HERE

Update 1: To make the width auto:

nav a {  
    color: #000000;  
    display: inline-block;  
    width: auto;  // changed this from width: 100px; to auto. 
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
}

DEMO HERE

Update 2: Finished Version!

DEMO HERE

Upvotes: 2

Neeraj Bhatt
Neeraj Bhatt

Reputation: 145

Try This

nav li a {  
border-right: 1px solid #FFFFFF;  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  

text-align:center; /*Added Line*/
}

Upvotes: 0

totymedli
totymedli

Reputation: 31078

Live demo

Change nav a to this:

nav a {
   text-align: center;
   width: 100%;
}

I also have to mention that you have two nav as. You should merge them into one and apply a little change:

nav a {  
    color: #000000;  
    display: inline-block;
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    width: 100%;  
    padding: 0 10px; 
}

jsFiddle for the merged one and the result for me:

Result

If you want to center the buttons as a row in the horizontal bar then just simply apply a width to the <ul> so add a new class: <ul class="clearfix cont"> and style it in a media rule so it won't affect the other layouts:

@media screen and (min-width: 600px) {  
   .cont {width: 380px;}
}

jsFiddle and the result:

Final result

Upvotes: 1

Ken Verhaegen
Ken Verhaegen

Reputation: 148

Making the choice for a float isn't always the right one.

Your example contains a fixed width of 600px on the "nav ul" element is weird when you only have 4 elements of ~100px width. You can't center that...

I basically removed the float, and the clearfixes. And then I've made it to contain the following based on how I'd do it..

nav {
  margin: 0 auto;
  text-align: center;
}
nav ul {
  margin: 0 auto;
  text-align: center;
  width: auto;
}
nav ul li {
  display: inline;
  display: inline-block;
}
nav ul li a {
  /*width: 100px;*/
  width: auto;
  padding: 0 10px;
}

My example: http://jsfiddle.net/xewl/4CrdN/1/

I see that you have other versions that do kinda work as planned: http://jsfiddle.net/zJq52/6/ You didn't set a width on "nav ul li a" here. But why is there a width on "nav ul" of 400px?

Upvotes: 0

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

UPDATED DEMO JSFiddle

Here is the correct way to do the stuff you want

CSS-

nav ul {  
    padding: 0;  
    margin: 0 auto;
    width:800px;
    text-align:center;
    height: 40px;  
}
nav li {  
    display: inline-block;  //use inline block
}  
nav a {  
    color: #000000;  
    display: inline-block;  
    padding: 0 20px; //use padding instead of width
    text-decoration: none;  
    line-height: 40px;  
}

Upvotes: 0

umbriel
umbriel

Reputation: 751

Not sure exactly what you mean, but if you mean centering all the li in relation to its parent change the width from 600px to 400px

nav ul {
padding: 0;
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
}

demo: - http://jsfiddle.net/zQehH/2/

Upvotes: 0

Related Questions