Как центрировать это меню с помощью CSS?

Question

This is the menu I'm talking about

У меня возникает эта проблема, которую я не могу решить ... почему она не центрируется?

Я уже пробовал много всего здесь, на этом веб-сайте, но я не могу все понять, может кто-нибудь помочь мне с проблемой и попытаться объяснить мне, как сосредоточить его?

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

Answer 1

Вам нужно установить 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>