выровнять тексты или изображения в карусели Bootstrap

Question

Я использую Bootstrap 3.3.4, и я хочу знать, какой способ лучше выравнивать тексты или элементы в карусели.

вот Exemple от ползунка. Как я могу выровнять текст так и оставаться на любом разрешении экрана в одном и том же месте. Я использую top: x, right: x, но каждый раз, когда я изменяю размер окна, текст поднимается выше и не остается в середине.

CSS для Align

.carousel-caption { 
    position: absolute; 
    right: 15%; 
    bottom: 40%; 
    left: 15%; 
    z-index: 10; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    color: #fff; 
    text-align: center; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
} 

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

В этом exemple текст остается фиксированным на каждом устройстве.

Answer 1

<div class="wrap"> 
    <div class="display-table"> 
     <div class="display-cell"> 
      <h1>Title in here</h1> 
     </div> 
    </div> 
</div> 

<style> 
.wrap { 
    width:   100%; 
    height:   400px; 
} 
.display-table { 
    width:   100%; 
    height:   100%; 
    display:   table; 
} 
.display-cell { 
    width:   100%; 
    height:   100%; 
    display:   table-cell; 
    vertical-align: middle; 
} 
</style> 

Это позволяет фиксировать вертикальное выравнивание и работать с перекрестным браузером. Просто обратите внимание, что фиксированная высота, применяемая к .wrap, должна присутствовать, чтобы дети наследовали высоту 100%!

Надеется, что это помогает :)

Answer 2

Надежда, попробуйте эту демку, которая центрирует текст по вертикали в карусели Bootstrap.

Вот Fiddle.

Все я здесь дают div высоту, которая содержит текст, а затем расположить его с этим CSS ...

.vcenter { 
    position: absolute; 
    height:100px; 
    width:100%; 
    top:50%; 
    bottom:50%; 
    margin-top: -50px; 
    margin-bottom: -50px; 
}