I want to align my menu to the center

Question

I want to align my menu to the center

Asked 10 years, 8 months ago

Viewed 19,014 times

1

#menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);    
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 50px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;

}

This is the current result:

inserir a descrição da imagem aqui

I want to put this menu aligned to the center but so far everything I tried nothing worked ...

HTML CODE

<html>
    <title></title>

    <head>
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>

    <body>
        <br>
        <ul id="menu">
            <li><a href="site.html">Pagina Inicial</a>
            </li>
            <li>    <a href="#">Produtos</a>

                <ul>
                    <li><a href="inserir.html">Inserir</a>
                    </li>
                    <li><a href="menuprodutos.html">Ver Produtos no Site</a>
                    </li>
                    <li><a href="procurar.html">Procurar</a>
                    </li>
                    <li><a href="remover.html">Eliminar</a>
                    </li>
                    <li><a href="listar.php">Listar</a>
                    </li>
                </ul>
            </li>
            <li>    <a href="site.html">A nossa Empresa</a>

                <ul>
                    <li><a href="empresa.html">Hist&oacute;ria</a>
                    </li>
                    <li><a href="val.html">Valores</a>
                    </li>
                </ul>
            </li>
            <li><a href="cont.html">Contactos</a>

                <ul>
                    <li><a href="email.html">Contacte-nos </a>
                    </li>
                </ul>
            </li>
            <li>    <a href="formulario.html">Formul&aacute;rio </a>
            </li>
            <li>
        </ul>
        <br>
        <br>

        <body background="stardust.png">
            <div id="bodyy">
                <center>
                    <BR>
                    <BR>
                    <BR>
                    <BR>
                    <BR>

<h1> <font color="white">Inserir Novo Produto</font> </h1>

                    <form name="form1" method="post" action="inserir.php">
<font color="white">Codigo:</font>
                        <Input type="text" name="codproduto">
                        <br/>
                        <br/>
                        </input>
<font color="white">Nome:</font>
                        <input type="text" name="nomeproduto"></input>
                        <br/>
                        <br/>
<font color="white">Quantidade:</font>
                        <input type="text" name="quantidade"></input>
                        <br/>
                        <br/>
                        <input type="submit" value="Inserir" />
                        <input type="reset" value="Apagar dados" />
                </center>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                </form>
            </div>
            <script>
                function valida(form) {
                    if (form.codproduto.value == "") {
                        alert("Preencha o código corretamente.");
                        form.codigo.focus();
                        return false;
                    }

                    function valida(form) {
                        if (form.nomeproduto.value == "") {
                            alert("Preencha o nome corretamente.");
                            form.nome.focus();
                            return false;
                        }

                        function valida(form) {
                            if (form.quantidade.value == "") {
                                alert("Preencha a quantidade corretamente.");
                                form.codigo.focus();
                                return false;
                            }
            </script>
            <br>
            <br>
            <br>
            <br>
            <br>
        </body>

</html>

you could have edited the other one, you didn’t need to create a new one, so be advised for your next questions

– Math

2014/04/23 at 11:15
1

João, boa! can add html as well?

– Sergio

2014/04/23 at 11:20
@João, can you improve this jsFiddle to reproduce your problem? I think that at least the information of estilo.css: http://jsfiddle.net/frLfS/

– Sergio

2014/04/23 at 11:49

6 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Flávio Silva • **469** points · Answer 1 · 2014-04-23T12:16:08+00:00

Try to get more information next time, to make it easier to understand the problem, but from what the picture shows I think I know what you want.

To achieve the effect you want, I believe it is necessary to make some modifications. The first would be by your menu inside a <div> and this div would have its rounded edge style, background and other effects, which today has on the menu. And the css code for your menu would add the following code:

#menu{
 margin: auto; /* esse cara vai centralizar*/
 max-width: 800px; /* a largura máxima para o seu menu, para que ele possa ser centralizado. */
}

Another way would be for you to change the display, if you don’t know the size set.

#menu{
 display: table;
 margin: auto;
}

Always remember to declare a DOCTYPE for your html, so put the code in the first line

<!DOCTYPE html> <!-- DocType do HTML5, por exemplo -->

by Rodrigo A. Santos • **189** points · Answer 2 · 2017-03-19T18:53:25+00:00

The question is old but the doubt still persists, as this is one of the first posts that appear in google, it does not cost to update, especially if you still do not know flex-box!
put the menu inside a div or any element that will be the parent.
insert this css:

.div-pai{
    display: flex;
    justify-content: center;
}

plain as that!
this still eliminates the float: left, or display: inline-block; or from determining a width for the parent div!
follows a lot of flex-box link information
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

by João Paulo • **1,426** points · Answer 3 · 2014-07-09T01:10:50+00:00

<div style="width: 200px; margin: 0 auto; left: 50%; margin-left: auto; text-align: center;">
 <ul id="menu">
 <li>teste</li>
 </ul>
</div>

width you put the size you want.

by Pedro Vinícius • **1,870** points · Answer 4 · 2014-06-08T20:56:19+00:00

That usually works for me:

ul{
   text-align: center;
}

Take a look at this:

http://jsfiddle.net/7hjPe/

by brunomarks7 • 29 points · Answer 5 · 2014-04-23T13:50:11+00:00

Take a look if this way suits you, I usually do like this:

http://codepen.io/anon/pen/npsHv

#menu{
  max-width: 960px;
  background: gray;
  margin: 0 auto;
  text-align: center;
  padding: 15px 10px;
  box-sizing: border-box;
}
#menu li{
  display: inline-block;
  margin: 10px 15px;
  position: relative;
}
#menu ul{
  display: none;
}
#menu li:hover ul{
  display: block;
  position: absolute;
  left: 0;
  width: 150px;
  text-align: left;
  padding: 0;
  background: white;
}
#menu li:hover ul li{
  display: block;
  margin: 10px 0;
}

HTML:

<html>
<body>
  <ul id="menu">
    <li><a href="site.html">Pagina Inicial</a></li>
    <li>    
      <a href="#">Produtos</a>
      <ul>
        <li><a href="inserir.html">Inserir</a></li>
        <li><a href="menuprodutos.html">Ver Produtos no Site</a></li>
        <li><a href="procurar.html">Procurar</a></li>
        <li><a href="remover.html">Eliminar</a></li>
        <li><a href="listar.php">Listar</a></li>
      </ul>
    </li>
    <li>    
      <a href="site.html">A nossa Empresa</a>
      <ul>
        <li><a href="empresa.html">Hist&oacute;ria</a></li>
        <li><a href="val.html">Valores</a></li>
      </ul>
    </li>
    <li><a href="cont.html">Contactos</a>
      <ul>
        <li><a href="email.html">Contacte-nos </a></li>
      </ul>
    </li>
    <li>    
      <a href="formulario.html">Formul&aacute;rio</a>
    </li>
  </ul>
</body>
</html>

by Fabiano Rocke • 61 points · Answer 6 · 2014-07-09T19:52:12+00:00

Draw your menu inside a div , as below and play the menu style for margin:"auto"

<div style="text-align: center;">
  <ul id="menu" style="margin: 0 auto;">
  "seu menu"
  </ul>
</div>