probleme de position avec css

salut,
bon j'ai une problème de position de ma slider que je veut la centrer dans la page,personnellement j'arrive pas ce pour ça je poster cette discutions :
elle se trouve au gauche de la page

la partie du head y compris la feuille de style ::

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<title>Document sans titre</title>
 
<script src="mootools-release-1.11.js" type="text/javascript" language="javascript"></script>
<script src="Slider.js" type="text/javascript" language="javascript"></script>
 
<script language="javascript">
var mySlideA = new Slider($('gutterA'), $('minKnobA'), 
			{
			 	start:0,
				end:100,
				knobheight: 32,					           
				onChange: function(pos)
 
					  {
					    $('sliderLabelA').setHTML('min  : '+pos.minpos+ 'max : '+pos.maxpos);
				 	  },  
 
				$('maxKnobA')).setMin(min2).setMax(max2);
             }
</script>
 
 
 
<style type="text/css" media="screen">
 
.gutter
 
 { 
   position: relative;
   height: 32px;
   width: 300px;
   margin-top: 10px;
   background: url(16sliderbg.png) repeat-x;
 }
.knob 
 
  { position: absolute;
     height: 32px;
    width: 32px;
    background: url(16ball.png) no-repeat;
    cursor: pointer;
  }
 
</style>
</head>

et la partie body celle la :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
<body>
 
     <label id="sliderLabelA"> </label>
     <label id="sliderLabelb"> </label>
     <label id="sliderLabelc"> </label>
 
 <div  id="gutterA" class="gutter">
      <div id="minKnobA" class="knob"></div>
      <div id="maxKnobA" class="knob"></div>
</div>
</body>
</html>