0

Estoy tratando de agregar texto a una imagen dentro de un carrusel, pero este no alinea bien los textos, y ya he intentado muchas cosas, pero con ninguna logro hacer que me funcione y sea responsive.
Por ejemplo, actualmente tengo

    <!-- Boostrap -->
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <div id="Publicaciones" class="publicaciones" style="border: red solid 3px;">
      <br><br><br>
      <h1 style="text-align: center; color:black;">Publicaciones</h1>

      <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="http://placekitten.com/g/300/300" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="http://placekitten.com/g/300/300" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

CSS

.publicaciones {
  width: 100%;
  min-height: 750px;
  background-color: #fff;
  position: relative;
  color: #fff;
}

.carousel-control-prev{
  background: rgba(209, 215, 4, 0.51);
  color: #fff;
  width: 42px;
  height: 163px;
  left: 10%;
  top: 25%;
  position: absolute;
}

.carousel-control-next {
  background: rgba(209, 215, 4, 0.51);
  position: absolute;
  color: #fff;
  width: 42px;
  height: 163px;
  left: 90%;
  top: 25%;
}

.carousel-inner{
  box-shadow: 0px 4px 50px rgba(120, 143, 156, 0.25);
  display: block;
  border-radius: 15px;
  max-width: 50%;
  max-height: 500px;
  margin-left: 25%;
}

.carrusel {
  transform: translateY(-50%) translateX(-10%);
  top: auto;
  position: relative;
  color: #fff;
}

.carousel-item.carrusel{
  position: relative;
  display: inline-block;
  margin: 25% 25% 25% 25%;
}

.carousel-caption {
  text-shadow: 0 0 3px #000;
  position: absolute;
  z-index: 1;
  display:table;
  width:100%;
  height:100%;
}

.absolute-div {
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.carousel-caption h3 {
  display:table-cell;
  vertical-align: middle;
  text-align:center;
}

.item {
  position:relative;
}

.carousel-indicators [data-bs-target] {
  background-color: #141414;
}

.carousel-indicators .active{
  background-color: #D1D704;
}

.carousel-item img{
  width:400px;
  height:400px;
}

Y lo que consigo con esto Have it

No se acerca a lo que busco Need it

La imagen es solo representativa

4
  • Podés crear un snippet con el botón que indica <>.
    – padaleiana
    el 12 ene. 2022 a las 18:59
  • @padaleiana Lo he intentado, pero siempre hay algo que no queda bien ajustado cuando cambio a dispositivo movil
    – Alfa Rojo
    el 12 ene. 2022 a las 19:11
  • Yo es que estoy en contra de usar apenas CSS extra en bootstrap. Luego cuesta mucho de mantener... ¿Has probado con insertar un card en lugar de todo eso? Son bastante flexibles. Aquí te dejo su enlace en su manual: getbootstrap.com/docs/5.1/components/card
    – masterguru
    el 12 ene. 2022 a las 19:37
  • @masterguru Ohhh se me habían olvidado, tienes razón, probaré implementarlo y te comento sii funciona :D Gracias!!
    – Alfa Rojo
    el 12 ene. 2022 a las 19:45

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.