0

He estado haciendo un ejercicio y no logro centrar los h1 ni los p ni los botones dentro del carrusel. Estoy trabajando por primera vez en bootstrap y asumo que debe ser por eso> Pero no encuentro el error. He usado la clase d-flex align-items-center pero aún nada. Acá les dejo parte del código a ver si alguien puede saber lo que pasa. También he tratado de utilizar clases internas pero no me toma nada de lo que escribo allí

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">    
            <img class="d-block w-100 " src="../starter-code/img/slider-1.jpg" alt="overlay">
            <div class="carousel-caption d-none d-lg-block">
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 img-fluid" src="../starter-code/img/slider-2.jpg" alt="Second slide">
            <div class="carousel-caption d-none d-lg-block" >
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="../starter-code/img/slider-3.jpg" alt="Third slide">
            <div class="carousel-caption d-none d-lg-block" >
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="../starter-code/img/slider-4.jpg" alt="Fourth slide">
            <div class="carousel-caption d-none d-lg-block" >
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

Gracias

1 respuesta 1

0

Bootstrap posiciona a los elementos carousel-caption con las reglas position: absolute y bottom: 20px, lo que provoca que los <h1>, <p> y <button> que tienen dentro, se posicionen en la parte inferior de cada diapositiva. Si quieres que salgan centrados verticalmente te bastaría con sobreescribir ese bottom: 20px por un bottom: 45% (aproximadamente, puedes ajustarlo para acomodarlo a tu gusto).

.carousel-caption {
  bottom: 45% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">    
            <img class="d-block w-100 " src="https://www.affinity-petcare.com/advance/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="overlay">
            <div class="carousel-caption d-none d-lg-block">
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 img-fluid" src="https://www.affinity-petcare.com/advance/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="Second slide">
            <div class="carousel-caption d-none d-lg-block" >
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://www.affinity-petcare.com/advance/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="Third slide">
            <div class="carousel-caption d-none d-lg-block" >
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://www.affinity-petcare.com/advance/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="Fourth slide">
            <div class="carousel-caption d-none d-lg-block" >
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis temporibus accusamus dolor
                    repellat doloremque eaque dolores eos ex magnam libero animi nulla praesentium laudantium
                    modi, ut sit fugit vitae rem?</p>
                <a href="#">
                    <button type="button" class="btn btn-outline-light">READ MORE</button>
                </a>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

Para poder apreciar el centrado se ha de reproducir el ejemplo a pantalla completa debido a la clase d-none que tienes puesta en los .carousel-caption.

Comentario:

Posicionar con !important no es aconsejable, en su lugar aconsejo dotar a la regla de mayor especifidad. Tan solo lo uso para ejemplificar.

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.