0

Estoy haciendo una galería de fotos con un carousel de bootstrap 4 pero la imagen se me ve al lado izquierda de este así: introducir la descripción de la imagen aquí

He intentado darle un margin-left pero la imagen no me queda responsive así que lo he quitado, acá dejo el código html

    <h3 class="card-title text-center" style="margin-top: 10px;">AGUAS OCULTAS</h3>
    <div class="container">
    <div class="row justify-content-center">
      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8"
            aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="9"
            aria-label="Slide 3"></button>

        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/aguas10.jpg" alt="" id="aguas10" onclick="imagen('aguas10')" class="img-fluid">
          </div>
          <div class="carousel-item">
            <img src="img/aguastodas.png" alt="Análisis territorial.
                Unión de diferencias" id="aguas2" onclick="imagen('aguas2')">
          </div>
          <div class="carousel-item">
            <img src="img/aguaspa.png" alt="Parte alta. Presencia de
                Niebla." id="aguas3" onclick="imagen('aguas3')">
          </div>
          <div class="carousel-item">
            <img src="img/aguascc.png" alt="Cuatro Corredores.
                Quebradas." id="aguas4" onclick="imagen('aguas4')">
          </div>
          <div class="carousel-item">
            <img src="img/aguasze.png" alt="Zona de Encuentro.
                Transición" id="aguas5" onclick="imagen('aguas5')">
          </div>
          <div class="carousel-item">
            <img src="img/aguasda.png" alt="Domesticación del Agua. Agua al
                mar" id="aguas6" onclick="imagen('aguas6')">
          </div>
          <div class="carousel-item ">
            <img src="img/agua7.jpg" alt="Análisis territorial. Estrategias
                por estrato" id="aguas7" onclick="imagen('aguas7')">
          </div>
          <div class="carousel-item ">
            <img src="img/agua8.jpg" alt="Fotomontaje" id="aguas8" onclick="imagen('aguas8')">
          </div>
          <div class="carousel-item ">
            <img src="img/agua9.jpg" alt="Fotomontaje" id="aguas9" onclick="imagen('aguas9')">
          </div>
        </div>

        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Atrás</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Siguiente</span>
        </button>
      </div>
    </div>
  </div>

Espero puedan ayudarme.

1
  • Puedes inspeccionar el elemento de la imagen, para verificar la propiedad display de la imagen
    – DavElsanto
    Commented el 29 abr. 2021 a las 2:44

1 respuesta 1

0

Hay una class en bootstrap 4 (desconozco si en las versiones anteriores existe) que sirve para centrar las imágenes.

<img src="..." class="rounded mx-auto d-block" alt="...">

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.