如何將此菜單與CSS集中？

This is the menu I'm talking about 如何將此菜單與CSS集中？

我有這個問題，我無法解決......爲什麼它不居中？

我已經嘗試過這個網站上有很多的東西在這裏，但我不明白這一切，誰能幫我這個問題並試圖向我解釋如何中心呢？

.menu { 
 
\t font: 16px 'Dosis', sans-serif; font-weight: 600; 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t float: left; 
 
\t border: none; 
 
} 
 

 
.menu li { position: relative; float: left; } 
 

 
.menu li a { 
 
\t color: #FFF; 
 
\t text-decoration: none; 
 
\t list-style: none; 
 
\t display: block; 
 
\t margin: 0; 
 
\t padding: 14px 11px 0 11px; 
 
\t height: 36px; 
 
} 
 

 
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; } 
 

 
.menu li ul { 
 
\t position: absolute; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t top: 50px; 
 
\t left: 0px; 
 
\t background: #F60; 
 
\t display: none; 
 
\t float: left; 
 
\t z-index: 999; 
 
} 
 

 
.menu li:hover ul ul { display: none; } 
 

 
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; } 
 

 
.menu li ul li { display: block; width: 200px; } 
 

 
li.border0 { border: none; } 
 

 
.menu li ul li ul { \t z-index: 998; top: 0px; left: 200px; } 
 

 
body { behavior: url(csshover.htc); }

<ul class="menu"> 
 
    <li><a href="../index.html" title="INÍCIO">INÍCIO</a></li> 
 
    <li><a href="../apresentacao.html" title="PROGRAMAÇÃO">PROGRAMAÇÃO</a></li> 
 
    <li><a href="../comissao.html" title="HOSPEDAGEM">HOSPEDAGEM</a></li> 
 
    <li><a href="../local.html" title="SUBMISSÃO">SUBMISSÃO</a></li> 
 
    <li><a href="../inscricao.html" title="LOCAL">LOCAL</a></li> 
 
    <li><a href="../trabalhos.html" title="INSCRIÇÃO">INSCRIÇÃO</a></li> 
 
    <li><a href="../programacao.html" title="CONTATO">CONTATO</a></li>  
 
\t </ul>

來源

2017-01-16 Filipe Aringueri

https://jsfiddle.net/r0t6p04b/ – TricksfortheWeb

您需要設置text-align: center爲.menu和unfloat一個菜單項：

（我已經添加了background: teal;爲白字的知名度）

.menu { 
 
\t font: 16px 'Dosis', sans-serif; font-weight: 600; 
 
    text-align: center; 
 
\t list-style: none; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
\t background: teal; 
 
} 
 

 
.menu li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.menu li a { 
 
\t color: #FFF; 
 
\t text-decoration: none; 
 
\t list-style: none; 
 
\t display: block; 
 
\t margin: 0; 
 
\t padding: 14px 11px 0 11px; 
 
\t height: 36px; 
 
} 
 

 
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; } 
 

 
.menu li ul { 
 
\t position: absolute; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t top: 50px; 
 
\t left: 0px; 
 
\t background: #F60; 
 
\t display: none; 
 
\t float: left; 
 
\t z-index: 999; 
 
} 
 

 
.menu li:hover ul ul { display: none; } 
 

 
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; } 
 

 
.menu li ul li { display: block; width: 200px; } 
 

 
li.border0 { border: none; } 
 

 
.menu li ul li ul { \t z-index: 998; top: 0px; left: 200px; } 
 

 
body { behavior: url(csshover.htc); }

<ul class="menu"> 
 
    <li><a href="../index.html" title="INÍCIO">INÍCIO</a></li> 
 
    <li><a href="../apresentacao.html" title="PROGRAMAÇÃO">PROGRAMAÇÃO</a></li> 
 
    <li><a href="../comissao.html" title="HOSPEDAGEM">HOSPEDAGEM</a></li> 
 
    <li><a href="../local.html" title="SUBMISSÃO">SUBMISSÃO</a></li> 
 
    <li><a href="../inscricao.html" title="LOCAL">LOCAL</a></li> 
 
    <li><a href="../trabalhos.html" title="INSCRIÇÃO">INSCRIÇÃO</a></li> 
 
    <li><a href="../programacao.html" title="CONTATO">CONTATO</a></li>  
 
\t </ul>

來源

2017-01-16 21:01:16 Banzay

https://jsfiddle.net/r0t6p04b/ – TricksfortheWeb

如何將此菜單與CSS集中？

回答

相關問題