when using zurb foundation orbit slider, how to center slides

Question

as shown in this screenshot: on my 24" monitor the white background shows through my orbit slider. This is because my source image is narrower (in pixels) than the browser window's width.

If I make my window narrower, the image scales down as one would expect, without any background showing through:

What I would like to accomplish is to center the <li> elements that make up the slides so that when the image is narrower it won't have dumb looking white stripe on one side.

Answer 1

Try this:

Set up a class of full_width with the following style:

.full_width {
    width:100%;}

Add this class to the orbit ul:

<ul class="full_width" data-orbit data-options="...">
   <li><img src="img/slider/slide1.png"></li>
   <li><img src="img/slider/slide2.png"></li>
   <li><img src="img/slider/slide3.png"></li>
   <li><img src="img/slider/slide4.png"></li>
</ul>

Then in your style sheet add a class of full_width li img and set the width of your images and add margin: 0 auto like:

.full_width li img {
    width:960px;
    margin:0 auto;}