0

Tengo tres imagenes y lo que deseo es centrarlas y que haya espacio entre ellas.

Estoy utilizando bootstrap y no lo he podido conseguir, alguien tiene idea de como hacerlo?Dejo una captura de las imagenesintroducir la descripción de la imagen aquí y el codigo para que se entienda mas

<section id="estadisticas" class="ocultar_r">
    <div class="row justify-content-center">
        <div class="col-sm-4 text-center">
            <h2 class="mb-4">ESTADÍSTICAS DE LRFA</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, esse magnam adipisci tenetur quos eaque quia quidem molestias excepturi </p>
        </div>
    </div>
    <div class="row justify-content-around" id="">
        <div class="col-sm-12 text-center">
            <div id="padre">
                <img id="content_div_one_photo" class="rounded " src="https://lorempixel.com/160/110/cats/1/">
                
            </div>
            <div id="padre">
                <img id="content_div_one_photo" class="rounded " src="https://lorempixel.com/160/110/cats/1/">
                
            </div>
            <div id="padre">
                <img id="content_div_one_photo" class="rounded " src="https://lorempixel.com/160/110/cats/1/">

            </div>
        </div>
    </div>
</section>

1 respuesta 1

2

estas poniendo todas las imágenes dentro de un solo contenedor (col-sm-12), pero para que funcione el "justify-content-around" debes poner cada imagen en un contenedor diferente. Yo usé "col" pero puedes usar el que te acomode

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="estadisticas" class="ocultar_r">
        <div class="row justify-content-center">
            <div class="col-sm-4 text-center">
                <h2 class="mb-4">ESTADÍSTICAS DE LRFA</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, esse magnam adipisci tenetur quos eaque quia quidem molestias excepturi </p>
            </div>
        </div>
        <div class="container-fluid">
          <div class="row justify-content-around" id="">
            <div class="col text-center">
              <img id="content_div_one_photo" class="rounded " src="https://lorempixel.com/160/110/cats/1/">
            </div>
              <div class="col text-center">
                      <img id="content_div_one_photo" class="rounded " src="https://lorempixel.com/160/110/cats/1/">
              </div>
              <div class="col text-center">
                      <img id="content_div_one_photo" class="rounded " src="https://lorempixel.com/160/110/cats/1/">
              </div>
          </div>
        </div>
        
    </section>

2

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.