2

Estoy tratando de centrar un card-body y estoy aplicando el centrado tanto vertical como horizontal, aquí el código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Test 
        </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    
    
    <div class="container">
        <div class="row my-auto mx-auto">
            <div class="card card-body my-auto mx-auto">
                I am Groot.
            </div>
        </div>
    
    </div>
     
</html>

Y como resultado estoy obteniendo esto:

introducir la descripción de la imagen aquí

No entiendo por que sucede, ¿Acaso faltara algún enlace?

1 respuesta 1

2

En bootstrap 4 tienes la opción de flexbox, puedes ver más aquí https://getbootstrap.com/docs/4.0/utilities/flex/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block d-flex" style="height: 80px">
      <div class="card-body align-items-center d-flex justify-content-center">
        I am Groot.
      </div>
    </div>
  </div>
</div>

2
  • (y) mil gracias!
    – Deep Mind
    Commented el 11 mar. 2021 a las 14:16
  • A ti. Bienvenido.
    – HackeMate
    Commented el 11 mar. 2021 a las 14:17

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.