如何使用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>

​