html - CSS: center elements inside <div> side by side -

I'm trying all night to focus this element, without stacking them on each other: < / P>

I want to float them left But it works, but, they stick to the left side, whatever I have done.

HTML:

  & lt; Div class = "center pages cleanfix" & gt; & Lt; Buuton class = "center page-number" & gt; 1 & lt; / Buuton & gt; & Lt; Buuton class = "center page-number" & gt; 2 & lt; / Buuton & gt; & Lt; Buuton class = "center page-number" & gt; 3 & lt; / Buuton & gt; & Lt; / Div & gt;  

CSS:

 . Center {margin-left: auto; Margin-right: auto; }. Page Number {Display: Block; Float: None; Width: 28px; Height: auto; Boundary-radius: 3px; Background color: RGBA (0, 0, 0, 0.47); Box-Shadow: 0 2px 5px RGBA (0, 0, 0, 0.34); Text-shadow: 0 2px 5px rgba (0, 0, 0, .5); Font-weight: 400; Line-height: 1.5; Text align: center; Color: RGBA (255, 255, 255, 0.47); } "From" Code: Display: Block " 
 
 
  Display: Inline-block  "Update css below 
 
  Updated CSS  
 
 center {margin-left: auto; margin- Right: auto; text-align: center;} 
 
  .page-number {display: inline-block; float: none; width: 28px; height: auto; boundary-radius: 3px ; Background color: RGBA (0, 0, 0, 0.47); Box-shadow: 0 2px 5px RGBA (0, 0, 0, 0.34); Text-shadow: 0 2px 5px rgba (0, 0, 0, .5 ); Font-weight: 400; line -unchai: 1.5; text align: center; color: RGBA (255, 255, 255, 0.47);}