0

Hola tengo esta pagina web, y el problema es que queria mostrar las dos rows en dos filas separadas y no como dos columnas que es como se muestra. Es decir quiero que aparezca una fila con color danger y que ponga "i'm vertically centered" y debajo otra fila con color warning y que ponga tambien "i'm vertically centered". Y que por supuesto ambas filas esten centradas verticalmente.

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    </head>
    <body>
        <div class="container-fluid d-flex h-100">
            <div class="row align-items-center bg-danger w-100">
                <div class="col-6 mx-auto bg-info">
                    I'm vertically centered    
                </div>   
            </div> 
            <div class="row align-items-center bg-warning w-100">
                <div class="col-6 mx-auto bg-info">
                    I'm vertically centered    
                </div>            
            </div>
        </div>
    </body>
</html>

Si en lugar de d-flex pongo d-block en el contanier me aparece en dos filas distintas pero no aparece alineado al centro verticalmente. Por cierto en el navegador (tanto en firefox como en chrome) las dos filas (la danger y la warning) ocupan todo el alto de la pantalla cosa que no sucede en el snippet.

1 respuesta 1

3

Puedes hacer algo así:

<body>
    <div class="container-fluid">
        <div class="row align-items-center bg-danger h-50">
            <div class="col-12 mx-auto bg-info">
                I'm vertically centered    
            </div>   
        </div> 
        <div class="row align-items-center bg-warning h-50">
            <div class="col-12 mx-auto bg-info">
                I'm vertically centered    
            </div>            
        </div>
    </div>
</body>

El container no debe ser display: flex, y los row siempre son display: flex por defecto, por lo que funciona agregando solo a los rows un align-items center, luego a cada row le puse un h-50 que es equivalente a height: 50%; De esta forma quedan 2 Rows una encima de la otra, con sus cols adentro alineadas verticalmente.

Espero te sirva.

Por último vi que tienes cols de 6, entonces estás usando el mx-auto para centrarlas, eso funciona, quizás podrías usar también ya que estás utilizando flexbox aplicar justify-content-center.. Quedaría así:

<body>
    <div class="container-fluid">
        <div class="row align-items-center justify-content-center bg-danger h-50">
            <div class="col-6 bg-info">
                I'm vertically centered    
            </div>   
        </div> 
        <div class="row align-items-center bg-warning h-50">
            <div class="col-6 mx-auto bg-info">
                I'm vertically centered    
            </div>            
        </div>
    </div>
</body>

La primer row está hecha con justify-content-center y la segunda con mx-auto. En estos casos ya estaría centrada horizontal y verticalmente..

2
  • genial! muchas gracias. Commented el 24 dic. 2021 a las 19:48
  • Por nada, a las órdenes! Commented el 24 dic. 2021 a las 20:22

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.