Adding hero-unit in the middle of the page - css

Question

Bootply: http://www.bootply.com/66501
I want to put hero-unit box in the middle of the page (vertically). I set the size(span10) for the box. Also, there is a problem that the text from the bar is a little bit off and I don't know the reason. Please help me out!
<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

here is your solution
<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>