CODEWITHSUNDEEP
cssnavigation
slurm
slurm

Reputation: 91

How to center the navigation bar in CSS

I have difficulties in centering my navigation-bar. Tried a lot of things like background-position: center or display: inline-block; list-style-type: none; It doesn't seem to work. Also I'm not able to simply put a margin on the left side. Do you have some other ideas to center the bar? http://www.filmfutter.com/forum/

.zetta-menu {
 background-color: #000;
 background-position: right center;
 font-family: arial;
 font-size: 12px;
 font-weight: bold;
 height: 30px;
 line-height: 0;
 max-width: 978x;
 min-height: 30px;
 position: relative;

Upvotes: 0

Views: 82

Answers (4)

Vis
Vis

Reputation: 41

Use should use !important after margin:0 auto. Eg- margin:0 auto !important. !important properties can not be overridden by any other classes or IDs

Upvotes: 0

Moob
Moob

Reputation: 16184

You can get it to centre with margin:auto.

Note: You have some other declarations elsewhere in your CSS that are setting the margin to 0 so I've added !important in this example.

.zetta-menu {
    background-color: #000;
    background-position: right center;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 0;
    max-width: 978x;
    min-height: 30px;
    position: relative;
    margin: 0 auto!important;/* < just add this line to what you have already */
}

Upvotes: 0

Dax Hansen
Dax Hansen

Reputation: 31

Make sure that the element is set to display: block; and center it with margin: 0 auto;

Upvotes: 0

j08691
j08691

Reputation: 207861

Add margin:0 auto;

...................

Upvotes: 2

Related Questions