세로 중심 부트 스트랩 회전식 이미지 캡션

Question

부트 스트랩 3.0의 캡션을 세로로 가운데에 배치 할 수 있습니까?

다음은 자막, 모든 텍스트, 사진의 중앙에 있도록 지금 http://i.imgur.com/OJKaXwv.png

을 보는 방법의 스크린 샷입니까?

이

<div id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/slide01.jpg" alt="First slide"> 
     <div class="carousel-caption"> 
      <h1>Welcome</h1> 
      <p>Here you'll see a great text!</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="images/slide02.jpg" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Great Caption</h1> 
      <p>So, this will be a great text as well.</p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="images/slide03.jpg" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>One more</h1> 
      <p>Once again you'll see a great text here, seriously it'll be awesome!</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
</div> 

내 CSS 파일이 꽤 재고 (변경 아무것도)입니다 : 난 그냥 얻을 수

.carousel { 
    margin-bottom: 60px; 
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ 
    margin-top: -20px; 
} 

/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    min-height: 200px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    width: 100%; 
    display: block; 
    max-width: 100%; 
} 

이 작업을 이미 시도 :의 http://stackoverflow.com/questions/16887484/positioning-and-styling-of-twitter-bootstrap-carousel-image-captions/19623418#19623418 , http://stackoverflow.com/questions/19070256/center-content-vertically-in-bootstrap3-carousel-with-flexbox , http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ , http://jsfiddle.net/pYjnF/1/

없음 여기 내 HTML 코드입니다 그들은 단순히 캡션을 중앙에 두지 않았다.

나는 텍스트를 중앙에 배치하고 아무렇지도 않게 쉽게 처리 할 수있는 인상을 주지만 지금은 그 방법을 알아낼 수 없습니다. 당신의 CSS에서이 코드를 추가

Answer 1

시도 : 이미지의 크기에 따라 값을 PX

.carousel-caption { 
    margin-bottom: 50px; 
} 

변화.