How to change a slider size and center it in a div?

How to change a slider size and center it in a div?

This is the code that generates my slider:
  1. div1.append('<div class="slider">\n');
  2. div1.append('<label for="hour1">Hours:</label><input class="mimetic" type="text" id="hour1" maxlength="2"><br>\n');
  3. div1.append('<div id="hour1slider"></div></div>\n');
  4. $("#hour1slider").slider({max:24,step:hoursstep,slide:function( event, ui ){$("#hour1").val(ui.value );}});

The matter is, the slider fills all of the horizontal space it can. I found that I could resize it by setting a max width to the #hour1slider div, all the rest seems not work. Still, the slider insists at positioning itself on the far left of my div1, i tried setting borders, paddings, margins and so on both on she "slider" class div and on #hour1slider but nothing worked. Is there a way to do so? I want it to position to the center!