Question

Hey there guys!
I am trying to implement Easy Slider jQuery Plugin Version 1.7 and am having some issues.
From this demo page, you can see the numbered buttons below the slide and I am trying to center that with the slide and just can’t get it to work.

This is the default css for the numbered buttons and was wondering what I had to change it so that it centers within the page.

    /* numeric controls */  

ol#controls{
    margin:1em 0;
    padding:0;
    height:28px;    
    }
ol#controls li{
    margin:0 10px 0 0; 
    padding:0;
    float:left;
    list-style:none;
    height:28px;
    line-height:28px;
    }
ol#controls li a{
    float:left;
    height:28px;
    line-height:28px;
    border:1px solid #ccc;
    background:#DAF3F8;
    color:#555;
    padding:0 10px;
    text-decoration:none;
    }
ol#controls li.current a{
    background:#5DC9E1;
    color:#fff;
    }
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

Thanks for the help!

Answer 1

Just set

  text-align:center;

on the parent element.

Edit: add the following (with the correct width, I didn’t check) to ol#controls style def:

    width:250px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;