Добавление текста по изображению в карусели Bootstrap

Question

У меня есть карусель с изображением, которое я бы хотел наложить на текст, но он не работает. Текст отображается под изображением вместо наложенных поверх него

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

Вы можете просто position элемент absolute ют так же, как встроенные в Титры и установите top/bottom, left/right коррекций.

Обратите внимание, что карусельного подписи имеют z-index: 10 по умолчанию, так что вы можете дать позиционируемый элемент более высокого z-index:

Например:

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

Answer 2

Вот это возможное решение:

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> 

и 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; 
} 

Предполагая, что вы хотите их вертикально в середине изображения, в основном, вы хотите относительно позиционировать слайд-всевозможное родительского DIV, который будет наследуйте его высоту от совмещенной высоты изображения и текста. Затем вы захотите создать div, в котором находится текст с атрибутом css position: absolute. Этот элемент будет прямым дочерним элементом относительно позиционированного родителя. Это позволит вам полностью позиционировать текст в ближайшем относительно позиционном элементе. See this CSS Tricks tutorial to understand how this works.

Это позволит вам позиционировать текст поверх изображения, затем я пошел вперед и использовал позиционирование стола, чтобы вы могли вертикально центрировать их, хотя вы могли бы пойти и поместить их по изображению, где захотите.

Answer 3

Надежда это поможет кому-то, в моем случае я сделал это с помощью следующего кода:

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