Jak wyśrodkować napis na karuzeli Bootstrap?

Question

Mam karuzelę bootstrap i próbuję utworzyć podpis dla karuzeli, która jest zawsze pionowo wycentrowana i umieszczona nieco na lewo. Mam css do poziomego pozycjonowania .. ale kiedy próbuję ustawić pionowo, podpis nie pozostaje ustawiony. Jak mogę zachować napis .carousel zawsze wyśrodkowany w pionie i nieco w lewo?

HTML:

<!-- start JumboCarousel --> 
    <div id="jumboCarousel" class="carousel slide" data-ride="carousel"> 

     <!-- Indicators --> 
     <ol class="carousel-indicators hidden-xs"> 
      <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#jumboCarousel" data-slide-to="1"></li> 
      <li data-target="#jumboCarousel" data-slide-to="2"></li> 
      <li data-target="#jumboCarousel" data-slide-to="3"></li> 
     </ol><!-- end carousel-indicators --> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active" id="slide1"> 
       <a href="#"><img src="http://placehold.it/1920x720&text=Slide+1" alt="Slide 1"></a> 
       <div class="carousel-caption"> 
        <h1>Check Out this Moose</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <a href="#" class="btn btn-lg btn-primary">Learn More</a> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide1 --> 
      <div class="item" id="slide2"> 
       <img src="http://placehold.it/1920x720&text=Slide+2" alt="Slide 2"> 
       <div class="carousel-caption"> 
        <h1>#Slide Title</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <a href="#" class="btn btn-lg btn-primary">Learn More</a> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide2 --> 
      <div class="item" id="slide3"> 
       <img src="http://placehold.it/1920x720&text=Slide+3" alt="Slide 3"> 
       <div class="carousel-caption"> 
        <h1>#Slide Title</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <a href="#" class="btn btn-lg btn-primary">Learn More</a> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide3 --> 
      <div class="item" id="slide4"> 
       <img src="http://placehold.it/1920x720&text=Slide+4" alt="Slide 4"> 
       <div class="carousel-caption"> 
        <h1>#Slide Title</h1> 
        <p class="lead">This text is super engaging and makes you want to click the button.</p> 
        <button type="button" href="#" class="btn btn-lg btn-primary">Learn More</button> 
       </div><!-- end carousel-caption --> 
      </div><!-- end slide4 --> 
     </div><!-- end carousel-inner --> 

    </div><!-- end jumboCarousel --> 

CSS:

#jumboCarousel { 
    margin-top: 70px; 
    min-height: 300px; 
    min-width: 100%; 
} 
#jumboCarousel img { 
    min-height: 300px; 
    min-width: 100%; 
} 
#jumboCarousel > .carousel-indicators > li { 
    border-radius: 0px; 
    min-width: 25px; 
    background-color: #9d9d9d; 
    border: 1px solid black; 
    margin-right: 10px;; 
    margin-left: 10px;; 
} 
#jumboCarousel > .carousel-indicators > .active { 
    background-color: orange; 
} 
#jumboCarousel .carousel-caption { 
    color: black; 
    right: 58%; 
    text-align: center; 
    max-width: 500px; 
    left: auto; 
    top: auto; 
} 

coś zrobić, aby dać podpis pionowe wyrównanie zakończył się z podpisem coraz wypchnięty w górnej części karuzeli jako ekran -size maleje .. Dzięki za pomoc.

Bootply: http://www.bootply.com/aWK6oVRWVo

Answer 1

Można użyć funkcji translateY właściwości CSS transform pionowo wyrównać elementy. Browser support jest całkiem przyzwoity, w tym IE9. Dlatego dodaj następujące elementy do swojego kodu CSS .carousel-caption.

top: 50%; 
transform: translateY(-50%); 

Teraz trzeba pozbyć się dodatkowego bottom przestrzeni, dodana przez CSS domyślny bootstrap. Dodaj również następujące elementy do Twojego CSS w wersji .carousel-caption.

bottom: initial; 

I last but not least dać elementu nadrzędnego, w tym przypadku .item, następujące elementy CSS, aby zapobiec rozmazaniu, gdy jest ona umieszczona na pół piksela.

-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d; 

Working Example