I am using CarouFredSel as my carousel and I want to visually vertically align the text content within this carousel to my body content. I know you can do this with javascript (I have commented it out) by adjusting the left property of #carousel based on the browser width but I am looking for a CSS solution.
The blue screenshot on the left is displaying the website when the browser is maximized, and the ‘link3’ in the carousel appears to be aligned with ‘content’. The red screenshot on the right is displaying the website when the browser is minimized, and ‘link1’ is not visually aligned with ‘content’.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css">
<script type="text/javascript" language="javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
<script type="text/javascript" language="javascript" src="http://www.sfu.ca/~jca41/stuph/jquery.carouFredSel.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#carousel').carouFredSel({
items: 1,
scroll: {
fx: 'crossfade',
duration: 1000
},
pagination: {
container: '#pager',
duration: 500
}
});
/*$(window).resize(function() {
var winW = $(window).width();
var carouselWidth = $('#carousel .slide').css('width');
carouselWidth = carouselWidth.replace(/[^0-9]/g, '');
if (winW > carouselWidth) {
$('#c-carousel').css('left', (winW-carouselWidth)/2 + 'px');
} else {
$('#c-carousel').css('left', '0px');
}
}).resize();*/
});
</script>
<style type="text/css" media="all">
#heroicCarousel {
height: 100%;
padding: 0;
margin: 0 auto;
min-height: 250px;
position: relative;
z-index: 1000;
text-align:center;
max-width:600px;
}
.caroufredsel_wrapper {
width: 100% !important;
height: 100% !important;
}
#carousel {
position: absolute !important;
}
#carousel .slide {
width:600px;
height:250px;
overflow: hidden;
float: left;
}
#carousel .slide .content {
font-size: 55pt;
position: relative;
top: -100px;
left: 150px;
z-index: 5;
}
#carousel .slide img {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
#pager {
position: relative;
top: -700px;
left: 0;
z-index: 10;
display: block;
text-align: center;
}
#pager a {
background-color: #356;
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
border-radius: 10px;
box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
background-color: #134;
}
#pager a span {
display: none;
}
#content {
background: yellow;
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
z-index: 20px;
top: -520px;
font-size: 60pt;
}
</style>
</head>
<body>
<div id="heroicCarousel">
<div class="caroufredsel_wrapper">
<div id="carousel">
<div class="slide">
<img src="http://www.placehold.it/600x250/ff0000/999999">
<div class="content"><a href="">link1</a></div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/00ff00/999999">
<div class="content"><a href="">link2</a></div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/0000ff/999999">
<div class="content"><a href="">link3</a></div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/f0f0ff/999999">
<div class="content"><a href="">link4</a></div>
</div>
</div>
</div>
<div id="pager">
<a href="http://coolcarousels.frebsite.nl/c/18/#" class="selected"><span>1</span></a>
<a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>2</span></a>
<a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>3</span></a>
<a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>4</span></a>
</div>
</div>
<div id="content">
content
</div>
</body>
</html>
I usually do it with a wrapping elem around the divs. This elem is as wide as your widest div and any children with
margin:0 auto;are centered to it. Example http://jsfiddle.net/5LJhC/1/Very simple example but shows how as the carousel width changes the content div is centered