如何使用 CSS 将此菜单居中？

Question

This is the menu I'm talking about

我遇到了无法解决的问题...为什么它不居中？

我已经在这个网站上尝试了很多东西，但我还是不明白，有人可以帮我解决这个问题并向我解释如何居中吗？

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

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

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

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

.menu li ul {
 position: absolute;
 margin: 0;
 padding: 0;
 top: 50px;
 left: 0px;
 background: #F60;
 display: none;
 float: left;
 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 { 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>    
 </ul>

Answer 1

您需要为 .menu 设置 text-align: center 并取消浮动菜单项：

（我添加了 background: teal; 以提高白色单词的可见度）

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

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

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

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

.menu li ul {
 position: absolute;
 margin: 0;
 padding: 0;
 top: 50px;
 left: 0px;
 background: #F60;
 display: none;
 float: left;
 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 { 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>    
 </ul>

如何使用 CSS 将此菜单居中？

How to center this menu with CSS?

css

menu

center