How to center the CSS menu

Question

How to center the CSS menu

Navigation

#1 by (1 votes)

0

I have this project here to create the structure of an application, but I can not centralize the menus at all.

I would also like the page to be responsive.

Follow 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><ulclass="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>

html5 css apk app

asked by anonymous 16.11.2017 / 21:19

1 answer

concatenate variable in link - javascript HTML: Link a change of page

score 1 · Answer 1

Your code has some issues and other things that can be improved:

1. <nav> </nav>

The entire menu should be among these tags:

<nav>
   MENU AQUI
</nav>

2. Unnecessary% reps of%

You do not have to repeat <ul> to create each menu button. Besides being a bad practice, it pollutes and makes your code heavier. Only create a list <ul> and each <ul> being a button:

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

3. To center the menu, you can use <li> with display: flex; .

See your improved code below and auto-adjust 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>