Centrar un grupo de elementos organizados con "float" en su

Citar

Escrito el 18 May 2016 05:23 pm

Hola!
Intento centrar vertical y horizontalmente un menú de cuatro elementos organizados con "float left" dentro de su contenedor. He leído que la clave puede ser "display: table;" pero no lo consigo...

Gracias!

Código :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    
   <style>
      /**MENU**/
      #menu {
         background-color: #FFFF99;
         border-top-color: #CCCCCC;
         margin: 0auto;
         display: table;
         width: 100%;
         }
      #menupresentacion, #menuquees, #menupotencial, #menuautor {
         padding-right: 8px;
         padding-left: 8px;
         float: left;
         }
    </style>
</head>

<body>
   <nav id="menu">
      <ol style="list-style:none">
         <li id="menupresentacion">Presentación </li>
         <li id="menuquees">¿Qué es?</li>
         <li id="menupotencial">Potencial</li>
         <li id="menuautor">Autor</li>
      </ol>
   </nav><!--fin nav menu-->
</body>

</html>

Por chemartin

9 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 19 May 2016 05:18 pm

Código :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    
   <style>
      /**MENU**/
      #menu {
         background-color: #FFFF99;
         border-top-color: #CCCCCC;
         margin: 0auto;
         display: table;
         width: 100%;
         }

      #menu ol{
        margin: 0;
      }

      #menu li{
        margin: 10px;
      }

      #menupresentacion, #menuquees, #menupotencial, #menuautor {
         padding-right: 8px;
         padding-left: 8px;
         float: left;
         }
    </style>
</head>

<body>
   <nav id="menu">
      <ol style="list-style:none">
         <li id="menupresentacion">Presentación </li>
         <li id="menuquees">¿Qué es?</li>
         <li id="menupotencial">Potencial</li>
         <li id="menuautor">Autor</li>
      </ol>
   </nav><!--fin nav menu-->
</body>

</html>

Seguro esto es lo que buscas.

Por franqgeek

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador Web

@ImFranQ

Citar

Escrito el 20 May 2016 10:46 am

Si efectivamente con tu código he conseguido centrarlo verticalmente, pero no horizontalmente, al final lo he conseguido sustituyendo float: left; por display: inline;

Gracias!

Código :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>

<style>
      /**MENU**/
      #menu {
         background-color: #FFFF99;
         border-top-color: #CCCCCC;
         margin: 0auto;
         display: table;
         width: 100%;
       text-align:center;
         }
      #menupresentacion, #menuquees, #menupotencial, #menuautor {
      padding-right: 8px;
      padding-left: 8px;
      display: inline;
      }

    </style>
</head>

<body>

   <nav id="menu">
      <ol style="list-style:none">
         <li id="menupresentacion">Presentación </li>
         <li id="menuquees">¿Qué es?</li>
         <li id="menupotencial">Potencial</li>
         <li id="menuautor">Autor</li>
      </ol>
   </nav><!--fin nav menu-->

</body>



</html>

Por chemartin

9 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 24 May 2016 12:14 pm

Para centrarlo horizontal, necesitas usar algo como esto:

Código :

<style>
   body{
      height: 100%;
      margin: 0;
      padding: 0;
   }
   
   .tabla{
      display: table;
      height: 100%;
   }

   .celda{
      display: table-cell;
      vertical-align: middle;
   }

</style>

<section class="tabla">
   <section class="celda">
      <!-- Contenido -->
   </section>
</section>

Por franqgeek

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador Web

@ImFranQ

Centrar un grupo de elementos organizados con "float" en su

Escribe una respuesta rapida