如何用CSS中心这个菜单？

Question

This is the menu I'm talking about

我遇到了这个问题，我无法解决......为什么它不会中心？

我已经在这个网站上尝试了很多东西，但是我无法理解这一切，有人可以帮我解决问题，并试着向我解释如何集中它吗？

＆＃13;

＆＃13;

.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); }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

（我已添加background: teal;以查看白色字词）

＆＃13;

＆＃13;

.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); }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;