1

Tengo un problema con Bootstrap y es que pongo una imagen dentro de una etiqueta div, y creí que usando flexbox(la clase justify-content-center) podía centrarla verticalmente pero sigue igual en la parte izquierda. Quisera saber cual es la razon por el que no se centra horizontalmente.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <style>
        .img-portafolio-cards{
        height: 15.5rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="bg-warning m-3 justify-content-center">
                    <img src="https://us.123rf.com/450wm/phoebeyu/phoebeyu1612/phoebeyu161201619/67395759-fondo-de-l%C3%ADnea-cuadrada-de-geometr%C3%ADa-enrejado-de-tracer%C3%ADa-de-ventana-chino-incons%C3%BAtil-.jpg?ver=6" alt="..." class=" img-portafolio-cards img-responsive rounded-circle">
                </div>
            </div>
            <div class="col-4">
                <div class="bg-warning m-3 justify-content-center">
                    <img src="https://us.123rf.com/450wm/phoebeyu/phoebeyu1612/phoebeyu161201619/67395759-fondo-de-l%C3%ADnea-cuadrada-de-geometr%C3%ADa-enrejado-de-tracer%C3%ADa-de-ventana-chino-incons%C3%BAtil-.jpg?ver=6"alt="..." class=" img-portafolio-cards img-responsive rounded-circle">
                </div>
            </div>
            <div class="col-4">
                <div class="bg-warning m-3 justify-content-center">
                    <img src="https://us.123rf.com/450wm/phoebeyu/phoebeyu1612/phoebeyu161201619/67395759-fondo-de-l%C3%ADnea-cuadrada-de-geometr%C3%ADa-enrejado-de-tracer%C3%ADa-de-ventana-chino-incons%C3%BAtil-.jpg?ver=6"alt="..." class=" img-portafolio-cards img-responsive rounded-circle">
                </div>
            </div>   
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>

</html>

1 respuesta 1

0

No te está funcionando porque para hacer uso de la propiedad justify-content el elemento debe tener display: flex y en tu caso no lo tiene. Añadiendo al contenedor de la imagen la clase d-flex te debería de funcionar.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <style>
        .img-portafolio-cards{
        height: 15.5rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="bg-warning m-3 justify-content-center d-flex">
                    <img src="https://us.123rf.com/450wm/phoebeyu/phoebeyu1612/phoebeyu161201619/67395759-fondo-de-l%C3%ADnea-cuadrada-de-geometr%C3%ADa-enrejado-de-tracer%C3%ADa-de-ventana-chino-incons%C3%BAtil-.jpg?ver=6" alt="..." class=" img-portafolio-cards img-responsive rounded-circle">
                </div>
            </div>
            <div class="col-4">
                <div class="bg-warning m-3 justify-content-center d-flex">
                    <img src="https://us.123rf.com/450wm/phoebeyu/phoebeyu1612/phoebeyu161201619/67395759-fondo-de-l%C3%ADnea-cuadrada-de-geometr%C3%ADa-enrejado-de-tracer%C3%ADa-de-ventana-chino-incons%C3%BAtil-.jpg?ver=6"alt="..." class=" img-portafolio-cards img-responsive rounded-circle">
                </div>
            </div>
            <div class="col-4">
                <div class="bg-warning m-3 justify-content-center d-flex">
                    <img src="https://us.123rf.com/450wm/phoebeyu/phoebeyu1612/phoebeyu161201619/67395759-fondo-de-l%C3%ADnea-cuadrada-de-geometr%C3%ADa-enrejado-de-tracer%C3%ADa-de-ventana-chino-incons%C3%BAtil-.jpg?ver=6"alt="..." class=" img-portafolio-cards img-responsive rounded-circle">
                </div>
            </div>   
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>

</html>

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.