增加英雄單位在頁面

Question

Bootply中間：http://www.bootply.com/66501

我希望把英雄單位框的頁面（垂直）的中間。我爲盒子設置了尺寸（span10）。此外，還有一個問題，從酒吧的文本是有點關閉，我不知道原因。請幫助我！

<div id="myCarousel" class="carousel slide fullscrn"> 
    <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> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="item active fullscrn"> 
      <img src="http://placehold.it/600x480" class="fullscrn"> 
     </div> 
     <div class="item fullscrn"> 
      <img src="http://placehold.it/600x480" class="fullscrn"> 
     </div> 
     <div class="item fullscrn"> 
      <img src="http://placehold.it/600x480" class="fullscrn"> 
     </div> 
    </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
</div> 

<div class="hero-unit span10"> 
    <h1>Test</h1> 
    <p> 
    </p><div class="progress progress-striped active"> 
     <div class="bar" style="width: 11%;">11%</div> 
    </div> 
    <p></p> 
<p> 
    <a class="btn btn-primary btn-large"> 
    Learn more 
    </a> 
</p> 
</div> 

for CSS: 
.fullscrn{ 
height: 100%; 
width:100%; 
} 

Answer 1

這裏是您的解決方案

<div id="full-screen-slider" class="carousel slide"> 
    <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 fullscrn"> 
      <img src="http://placehold.it/600x480" class="fullscrn"> 
     </div> 
     <div class="item fullscrn"> 
      <img src="http://placehold.it/600x480" class="fullscrn"> 
     </div> 
     <div class="item fullscrn"> 
      <img src="http://placehold.it/600x480" class="fullscrn"> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" 
     href="#myCarousel" data-slide="next">›</a> 
</div> 
<style> 
    #full-screen-slider 
    { 
     margin-bottom: 0; 
    } 
    .carousel .carousel-inner .item img 
    { 
     width: 100%; 
    } 
    .all-sliders 
    { 
     position: fixed; 
     top: 25px; 
     right: 25px; 
     color: white; 
     z-index: 10; 
    } 
    .all-sliders:hover 
    { 
     color: white; 
    } 
</style> 
<div style="top: 21%; left: 16%; position: absolute;" class="container"> 
    <div class="content"> 
     <div class="hero-unit span10 "> 
      <h1> 
       Test</h1> 
      <p> 
      </p> 
      <div class="progress progress-striped active"> 
       <div class="bar" style="width: 11%;"> 
        11%</div> 
      </div> 
      <p> 
      </p> 
      <p> 
       <a class="btn btn-primary btn-large">Learn more </a> 
      </p> 
     </div> 
    </div> 
</div> 
<script src="Scripts/bootstrap.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     function setFullScreen() { 
      browserHeight = $(window).height(); 
      $("#full-screen-slider .carousel-inner .item img").css({ 
       height: browserHeight - 20 
      }); 
     } 
     $("#full-screen-slider .carousel-inner .item:eq(0)").addClass('active'); 
     setFullScreen(); 

     $(window).resize(function() { 
      setFullScreen(); 
     }); 
     $("#full-screen-slider").carousel({ interval: 5000 }); 
     if ($('.content').length > 0) { 
      $('.content').css('height', ($(window).height() - $('.content-section').offset().top - 120)); 
     } 




    }); 

</script>