Tema: Centrar 3 div's y lista desordenada
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/04/2016, 20:58
uri1230
 
Fecha de Ingreso: octubre-2009
Mensajes: 46
Antigüedad: 15 años, 4 meses
Puntos: 0
Exclamación Centrar 3 div's y lista desordenada
hola mi pregunta es la siguiente aver si me pueden ayudar:

tengo el siguien codigo html y css...
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="main.css">
  7. </head>
  8. <body>
  9.     <div id="contenedor">
  10.         <div class="top-panel">
  11.             <div class="logo">MovieStore</div>
  12.             <div class="navegacion">
  13.                 <ul id="menu">
  14.                     <li class="icon-1">1</li>
  15.                     <li class="icon-2 active">2</li>
  16.                     <li class="icon-3">3</li>
  17.                     <li class="icon-4">4</li>
  18.                     <li class="icon-5">5</li>
  19.                     <li class="icon-6">6</li>
  20.                 </ul>
  21.             </div>
  22.             <div class="user">
  23.                 <div class="user-img">1</div>
  24.                 <div class="user-name">name</div>
  25.                  <div class="user-img-edit">3</div>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </body>
  30. </html>
y main.css
Código CSS: 
Ver original
  1. *{
  2.     box-sizing: border-box;
  3. }
  4. body {
  5.     background-color: #3f444e;    
  6. }
  7. #contenedor {
  8.     width: 1194px;
  9.     margin: 0 auto;
  10.     background-color: aqua;
  11.     overflow: hidden;
  12. }
  13.  
  14. .top-panel {
  15.     font-family: 'Adobe Gothic Std';
  16.     border-top-left-radius: 5px;
  17.     border-top-right-radius: 5px;
  18.     width: 100%;
  19.     height: 76px;
  20.     background-color: #ffffff;
  21.     background-color: yellow;
  22.     overflow: hidden;
  23.     
  24. }
  25. .logo {
  26.     color: #3f444e;
  27.     font: 18px 'Adobe Gothic Std';
  28.     text-transform: uppercase;
  29.     font-weight: normal;
  30.     width: 114px;
  31.     margin-left: 30px;
  32.     margin-top: 25px;
  33.     display:inline-block;
  34.     background-color: black;
  35.     float: left;
  36.     
  37. }
  38. .navegacion {
  39.     font: 13px 'Adobe Gothic Std';
  40.     width: 349px;
  41.     height: 70px;
  42.     background-color:  red;
  43.     position: relative;
  44.     overflow: hidden;
  45.     margin: 0 auto;
  46. }
  47.  
  48. .user {
  49.     float: right;
  50.     color: #3f444e;
  51.     background-color: #ffffff;
  52. }
  53.  
  54.  
  55.  
  56. #menu {
  57.     align-content: center;
  58.     float: left;
  59.     width: 100%;
  60.     list-style-type: none;
  61.     margin: 0 auto;
  62.     padding: 0;
  63.     position: relative;
  64. }
  65.  
  66.  
  67.  
  68. #menu li{
  69.     float: left;
  70.     position: relative;
  71.     text-align: center;
  72.     padding-top: 10px;
  73. }
  74.  
  75. #menu ul{
  76.     width: 100%;
  77. }
  78.  
  79. .user-img {
  80.     width: 30px;
  81.     float: left;
  82.     display: inline-block
  83. }
  84.  
  85. .name {
  86.     width: 96px;
  87.     height: 12px;
  88.     color: #3f444e;
  89.     font: 15px 'Adobe Gothic Std';
  90.     display: inline-block
  91. }
  92.  
  93. .user-edit {
  94.     width: 12px;
  95.     display: inline-block;
  96.     float: right;
  97. }

Lo que quisiera es alinear el div logo a la izquiera, el div navegacion al centro y el div user a la derecha.
lo intente pero no logro hacerlo ese es mi codigo actual y me sale de la siguiente manera.
http://prntscr.com/apy71p

Y quisiera que me saliese de la sifguiente manera.

http://prntscr.com/apy9ku

si no me entendiero porfas pregunte espero y me puedan ayudar gracias!!