I want to align my menu to the center

Question

I want to align my menu to the center

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)
#6 by (-1 votes)

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:

IwanttohavethismenualignedtothecenterbutsofareverythingItrieddidnotwork...

HTMLCODE

<html><title></title><head><linkrel="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>

html css

asked by anonymous 23.04.2014 / 13:11

6 answers

Learning to use AJAX in ASP.Net MVC 4 Script to get tags with specific class and trigger onload

score 2 · Answer 1

Try for more information next time, to make it easier to understand the problem, but from what the image 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 one would be for its menu within a <div> and this div would have its round border style, background and the other effects, which it currently has in 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 to change the display , if you do not know the defined size.

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

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

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

score 2 · Answer 2

The question is old but the question still persists, as this is one of the first posts that appear in google, it does not cost to upgrade, especially if you 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;
}

Simple like this!
this still eliminates the float: left, or display: inline-block; or to determine a width for the parent div!
follow link info about flex-box link

score 0 · Answer 3

Take a look if that works for you, I usually do this:

link

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

score 0 · Answer 4

0

This usually solves for me:

ul{
   text-align: center;
}

Take a look at this:

link

08.06.2014 / 22:56

score 0 · Answer 5

0

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

09.07.2014 / 03:10

score -1 · Answer 6

-1

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

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

09.07.2014 / 21:52