У вас есть кнопки меню по центру css dropdown menu

Question

Я использую этот css для стилизации своего меню. В меню li в настоящее время установлено значение float: left, которое, очевидно, позиционирует их влево, однако мне бы очень хотелось, чтобы они были центрированы посередине.

Может ли кто-нибудь помочь мне с изменением этого, пожалуйста?

.menu{ 

border:none; 
border:0px; 
margin:0px; 
padding:0px; 
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
font-size:14px; 
font-weight:bold; 
} 
.menu ul{ 

background:#6991B7; 
height:35px; 
list-style:none; 
margin:0; 
padding:0; 

} 
.menu li{ 

    float:left; 
    padding:0px; 

    } 
.menu li a{ 
    background:#6991B7 url("images/seperator.gif") bottom right no-repeat; 
    color:#FFF; 
    display:block; 
    font-weight:normal; 
    line-height:35px; 
    margin:0px; 
    padding:0px 25px; 
    text-align:center; 
    text-decoration:none; 
    } 
    .menu li a:hover, .menu ul li:hover a{ 
     background: #2580a2 url("images/hover.gif") bottom center no-repeat; 
     color:#FFFFFF; 
     text-decoration:none; 
     } 
.menu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    /*top:1em; 
    /*left:0;*/ 
    } 
.menu li:hover ul{ 
    display:block; 

    } 
.menu li li { 
    background:url('images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
    } 
.menu li:hover li a{ 
    background:none; 

    } 
.menu li ul a{ 
    display:block; 
    height:35px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    } 
    .menu li ul a:hover, .menu li ul li:hover a{ 
     background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
     border:0px; 
     color:#ffffff; 
     text-decoration:none; 
     } 
.menu p{ 
    clear:left; 
    } 

Answer 1

Эй я думаю, что вы хотите, что ваш Навигационная шоу центр проверить этот код у меня есть некоторые модификации в коде CSS

1. text-align:center put to .menu css 
2. .menu li, .menu li a define to display:inline-block; 
3. .menu ul define margin: 0 auto; and overflow:hidden; 

Css

.menu{ 

border:none; 
border:0px; 
margin:0px auto; 
padding:0px; 
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
font-size:14px; 
font-weight:bold; 
    text-align:center; 
} 
.menu ul{ 

background:#6991B7; 
height:35px; 
list-style:none; 
margin:0 auto; 
padding:0; 
    overflow:hidden; 

} 
.menu li{ 

    display:inline-block; 
    padding:0px; 

    } 
.menu li a{ 
    background:#6991B7 url("images/seperator.gif") bottom right no-repeat; 
    color:#FFF; 
    display:inline-block; 
    font-weight:normal; 
    line-height:35px; 
    margin:0px; 
    padding:0px 25px; 
    text-decoration:none; 
    } 
    .menu li a:hover, .menu ul li:hover a{ 
     background: #2580a2 url("images/hover.gif") bottom center no-repeat; 
     color:#FFFFFF; 
     text-decoration:none; 
     } 
.menu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    /*top:1em; 
    /*left:0;*/ 
    } 
.menu li:hover ul{ 
    display:block; 

    } 
.menu li li { 
    background:url('images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
    } 
.menu li:hover li a{ 
    background:none; 

    } 
.menu li ul a{ 
    display:block; 
    height:35px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    } 
    .menu li ul a:hover, .menu li ul li:hover a{ 
     background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
     border:0px; 
     color:#ffffff; 
     text-decoration:none; 
     } 
.menu p{ 
    clear:left; 
    } 

HTML

<div class="menu"> 
<ul> 
    <li><a href="#">Demo link</a></li> 
    <li><a href="#">Demo link</a></li> 
    <li><a href="#">Demo link</a></li> 
    <li><a href="#">Demo link</a></li> 
    <li><a href="#">Demo link</a></li> 
    <li><a href="#">Demo link</a></li> 
</ul> 
</div> 

Живая демо http://jsfiddle.net/rohitazad/g3hLK/1/

Answer 2

Попробуйте установить margin: 0 auto; на .menu li a.

Answer 3

Вы можете объявить меню li элементы, как display:inline-block вместо этого и затем в меню контейнера центр их автоматически с помощью text-align:center свойства следующим образом:

.menu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    text-align:center; 
} 

.menu li{ 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    padding:0px; 
}