search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

Centering browser-wide slides? #586

Closed hornetnz closed 9 years ago

hornetnz commented 11 years ago

I need to find a way to make the browser window wide slides to center on the page, instead of left aligned. Because the clients needs to be able to add/remove slides easily, the CMS can't be setup to show these as centered background images. Is there some css/js I can modify to get these puppies centered with the site?

Mottie commented 11 years ago

Hi @hornetnz!

Would this work for you (demo)?

#container {
    width: 100%;
    height: 200px;
    list-style: none;
}

/*
  centering css from here: 
  http://css-tricks.com/centering-in-the-unknown/
*/
ul#slider div {
    text-align: center;
}
ul#slider div:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;

}
ul#slider img {
  display: inline-block;
  vertical-align: middle;
}

The above demo (without the expand option set) was on the wiki home page under Appearance