1

¿Cómo puedo centrar varios div verticalmente? Este es mi código para centrar horizontalmente:

    #nav{
        width:100%;
        height:64px;
        position:absolute;
        bottom:0;
        text-align:center;
    }
    .separacion_1{
        width:90%;
        height:4px;
        border-radius:10px;
        background-color:#ccc;
        margin:0 auto;
        margin-bottom:3px;
        margin-top:4px;
    }
    .btn{
        width:47px;
        height:47px;
        margin:3px;
        display:inline-table;
    }
    .btn_enviar{
        width:57px;
        height:47px;
        margin:3px;
        display:inline-table;
    }
    
    <div id="nav">
                <div class="separacion_1"></div>
                <div id="0" class="btn">H</div>
                <div id="0" class="btn">C</div>
                <div id="0" class="btn btn_enviar ">E</div>
                <div id="0" class="btn">F</div>
                <div id="0" class="btn">A</div>
    </div>

5
  • mi problema es que ahora quiero hacer el nav vertical y que H C E F A esten debajo uno de otros y centrados en el div nav Commented el 17 feb. 2021 a las 23:49
  • Ahora el nav esta horizontal pero a partir de pantallas 600px el nav sera vertical con un ancho de 64px y lo que no puedo hacer es centrar las cosas vertical dentro del nav Commented el 17 feb. 2021 a las 23:57
  • Intente dar al nav display:table y a btn display: table-cell; vertical-align: middle; asi lo centra pero ya los pone una a lado del otro y le quita el ancho del btn Commented el 18 feb. 2021 a las 0:05
  • ¿Porqué no usas flexbox?
    – FranAcuna
    Commented el 18 feb. 2021 a las 0:15
  • Porque solo las versiones nuevas de navegador soporta eso Commented el 18 feb. 2021 a las 0:19

1 respuesta 1

0

Te hago los siguientes comentarios:

  • No creo que para el resultado que expones debas usar: position:absolute; así como tampoco: display:inline-table;
  • Con un poco de CSS Grid y unos detalles mas lo podemos lograr de manera mas simple
  • Indicamos dentro de una media query que cuando los pixeles sean mínimo x cantidad entonces reajustamos por medio de grid-template-columns para lograr que los dic aparezcan uno debajo del otro
  • En conjunto con lo anterior podemos centrar vertical y horizontalmente por medio de place-content

Código de ejemplo:

    <style>
      *  {
        margin: 0;
        padding: 0;
      }
      
      #nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: 100vh;
        justify-items: center;
        align-items: end;
      }
    
      @media screen and (min-width: 600px) {
        #nav {
          place-content: center;
          grid-template-columns: 1fr;
        }
      }
    </style>
    <div id="nav">
                <div id="0" class="btn">H</div>
                <div id="0" class="btn">C</div>
                <div id="0" class="btn btn_enviar ">E</div>
                <div id="0" class="btn">F</div>
                <div id="0" class="btn">A</div>
    </div>

Comentarios finales:

  • No es que la forma que lo haces sea incorrecta pero me parece demasiado trabajo cuando se puede lograr con menos líneas
  • Te dejo el resto de la inclusión de los detalles estéticos a ti

Enlaces útiles

4
  • ya pero el grid no es compatible con todos los navegadores Commented el 18 feb. 2021 a las 11:16
  • @Daniel que navegadores se supone usarás?
    – user128299
    Commented el 18 feb. 2021 a las 14:52
  • chrome, mozilla de los moviles Commented el 18 feb. 2021 a las 17:35
  • Pues he de decirte @DanielOvidiu que para esos navegadores móviles CSS Grid va bastante bien
    – user128299
    Commented el 19 feb. 2021 a las 3:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.