Bootstrap karuselinde bir resmin üzerine metin ekleme

Question

Metni yerleştirmek istediğim görüntü içeren bir karuselim var, ancak çalışmıyor. Metin resmin altında görünen yerine o

<!-- WRAPPER FOR SLIDES --> 
        <div class="carousel-inner"> 
         <div class="active item"> 
          <div class="carousel-content"> 
           <img src="img/Slide 1.jpg" alt="..." position="relative"> 
           <p>TEST</p> 
          </div> 

          <div class="carousel-caption"> 
           <h3>What we do</h3> 
          </div> 
         </div> 
         <div class="item"> 
          <img src="http://placehold.it/1200x315" alt="..."> 
          <div class="carousel-caption"> 
           <h3>What we Do</h3> 
          </div> 
         </div> 
         <div class="item"> 
          <img src="http://placehold.it/1200x315" alt="..."> 
          <div class="carousel-caption"> 
           <h3>Who we Are</h3> 
          </div> 
         </div> 
        </div> 

Answer 1

Yapabilirsin sadece position eleman absolute ly gibi yerleşik altyazılar üstüne yerleştirilmiştir ve top/bottom, left/right dengelerini ayarlayabilirsiniz.

atlıkarınca başlıklar varsayılan olarak z-index: 10 var, yani daha yüksek bir z-index konumlandırılmış elemanını vermek isteyebilirsiniz Not olun: Örneğin

:

.carousel-content { 
 
    position: absolute; 
 
    bottom: 10%; 
 
    left: 5%; 
 
    z-index: 20; 
 
    color: white; 
 
    text-shadow: 0 1px 2px rgba(0,0,0,.6); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner"> 
 
    <div class="active item"> 
 
     <img src="http://lorempixel.com/1200/315" alt="..."> 
 
     <div class="carousel-content"> 
 
     <p>TEST</p> 
 
     </div> 
 
     <div class="carousel-caption"> 
 
     <h3>What we do</h3> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1200x315" alt="..."> 
 
     <div class="carousel-caption"> 
 
     <h3>What we Do</h3> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1200x315" alt="..."> 
 
     <div class="carousel-caption"> 
 
     <h3>Who we Are</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

İşte

Answer 2

bir olduğunu olası çözüm:

jsfiddle: http://jsfiddle.net/38v09vha/

  <div class="carousel-inner"> 
       <div class="item"> 
        <img src="http://placehold.it/1200x315" alt="..."> 
        <div class="absolute-div"> 
         <div class="carousel-caption"> 
          <h3>What we Do</h3> 
         </div> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x315" alt="..."> 
        <div class="absolute-div"> 
         <div class="carousel-caption"> 
          <h3>What we Do</h3> 
         </div> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x315" alt="..."> 
        <div class="absolute-div"> 
         <div class="carousel-caption"> 
          <h3>What we Do</h3> 
         </div> 
        </div> 
       </div> 
      </div> 

ve css:

.carousel-caption { 
    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; 
} 

bunları dikey ortasında hizalanmış istiyorum varsayarsak görüntüde-Temel olarak, hangi edecek nispeten slayt ürün üst div konumlandırmak isteyeceksiniz Resmin ve metnin birleşik yüksekliğinden yüksekliği miras alsın. Daha sonra, css özniteliği position: absolute olan metni barındıran bir div oluşturmak isteyeceksiniz. Bu eleman nispeten konumlandırılmış ebeveynin doğrudan bir çocuğu olacaktır. Bu, metninizi en yakın nispeten konumlandırılmış elemanın içine yerleştirmenize izin verecektir. See this CSS Tricks tutorial to understand how this works.

Bu, metni görüntü üzerinde konumlandırmanıza olanak tanır, daha sonra ileriye doğru hareket edip, dikey olarak ortalamanıza izin vermek için tablo konumlandırma işlevini kullanır, ancak devam edip istediğiniz yere resmin üzerine yerleştirebilirsiniz.

Answer 3

biri yardımcı Hope i aşağıdaki kodla yaptım benim durumumda:

<style> 
.carousel-caption { 
    position: absolute; 
    z-index: 1; 
    display:table; 
    width:100%; 
    height:100%; 
} 

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

.trickcenter { 
    position: fixed; 
    top: 84%; // 50% for perfect centering 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
</style> 

<div class="item"> 
    <img src="images/slider_T02.jpg" alt="Moto de collection"> 
    <div class="carousel-caption trickcenter"> 
     <div>HERE THE TEXT YOU WANT</div> 
    </div> 
</div> 

<div class="item"> 
    <img src="images/slider_T03.jpg" alt="Véhicule Haut de Gamme"> 
    <div class="carousel-caption trickcenter"> 
     <div>HERE THE SECOND TEXT</div> 
    </div> 
</div>