How to center the CSS menu

Asked

Viewed 85 times

0

I am with this project here to create the structure of an application, but I can not in any way centralize the menus.

I would also like the page to be responsive.

Follows the code:

*{margin: 0; padding: 0;}

body{
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
}

.menu{list-style:none; border:1px solid #c0c0c0; float:left; }

.menu li{position:relative; float:left; border-right:0px solid #c0c0c0; }

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

.menu li   ul{position:absolute; top:25px; left:0; background-color:#fff; display:none; }

.menu li:hover ul, .menu li.over ul{display:block;}

.menu li ul li{border:1px solid #c0c0c0; display:block; width:150px;}



.menu{
padding:5px;
background: rgba(255,255,255,0.9);
margin: 1% 1% 2% 1%;
max-width: auto;
border-radius: 10px;
}
<!DOCTYPE HTML>
<html lang="pt-br">
<head>

  <meta charset="UTF-8">
  <title>Menu em CSS Dropdown Horizontal - Linha de C�digo</title>


<!-- Aqui chamamos o nosso arquivo css externo -->
  <link rel="stylesheet" type="text/css" href="estilo.css">

<!--[if lte IE 8]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>


<body>

<nav> </nav>
<ul class="menu">

  <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>

</ul>

<ul class="menu">

  <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>

</ul>

<ul class="menu">

  <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>

</ul>

<ul class="menu">

  <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>

</ul>

<ul class="menu">

  <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>

</ul>

<ul class="menu">

  <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>

</ul>

</body>
</html>

css html5 app apk

1 answer

1

Your code has some problems and other items that can be improved:

1. <nav> </nav>

The whole menu should be between these tags:

<nav>
   MENU AQUI
</nav>

2. Repetitions of <ul> unnecessary

You don’t have to do it again <ul> to create each menu button. In addition to being a bad practice, it pollutes and makes your code heavier. Just create a list <ul> and each <li> being a button:

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

3. To center the menu, you can use display: flex; with justify-content: center;.

See your improved code below and auto adjustable to screen width:

*{margin: 0; padding: 0;}

body{
   font-family: arial, helvetica, sans-serif;
   font-size: 12px;
}

.menu{
   background: rgba(255,255,255,0.9);
   margin: 2% 1%;
   display: flex;
   justify-content: center;
   list-style:none;
}

.menu li{
   border-radius: 10px;
   width:150px;
   border:1px solid #c0c0c0;
   position:relative;
   margin: 0 1%;
}

.menu li a{
   border-radius: 10px;
   color:#333;
   text-decoration:none;
   padding:5px 10px;
   display:block;
   padding: 10px;
}

.menu li a:hover{
   background:#333;
   color:#fff;
   -moz-box-shadow:0 3px 10px 0 #CCC;
   -webkit-box-shadow:0 3px 10px 0 #ccc;
   text-shadow:0px 0px 5px #fff;
}

nav{
   width: 100%;
}
<nav>
   <ul class="menu">
   
     <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>
     <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>
     <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>
     <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>
     <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>
     <li><a href="#"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="" src="img/1.jpg"></a></li>
   
   </ul>
</nav>

  • When I run here on the site gets responsive, but when I do it outside of here it does not get.

Browser other questions tagged css html5 app apk

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