Css – Positioning of nivo slider

cssnivo-sliderpositioning

I have changed the size of the Nivo slider and caption on My Site and now the image and slider are off center and hard left. I would like it to be centered with the navigation bar above it. Can someone assist me with this?

Currently I have the following CSS for the slider, image and caption properties:

.nivoSlider {
  position:absolute;
  width:850px; 
  height:400px;  
  overflow:hidden;
}
.nivoSlider img {
  position:relative; 
  width:850px; 
  height:400px; 
  overflow:hidden; 
  top:0px; 
  display:none;
}
.nivoSlider a {
  border:0; 
  display:block;
}
.nivo-caption {
  position:absolute;  
  bottom:0; 
  background:#09dcc7; 
  padding:5px 5px 5px 5px; 
  z-index:8; 
  overflow:hidden;
}

Best Answer

If you just want to have it centered, you can use margin: 0 auto; on the slider wrapper:

CSS

#slider-wrapper-full {
    height: 400px;
    margin: 0 auto;      /* Add this line */
    overflow: hidden;
    padding-top: 10px;
    width: 850px;
}
Related Topic