Centrar imagenes con bootstrap

publicado por: Anonymous

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

_x000D_

_x000D_

<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>

_x000D_

_x000D_

_x000D_

solución

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

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *