html - Want to create buttons like the image shown below -

i want create html page demo image:

i have created 3 buttons using anchor tag data-role=button corresponding color , text. want align circles in way image shown , bring them in center of html page. please me.

thanks in advance.

working example: http://jsfiddle.net/ey6yb/1/

html :

<div id="button-container">     <a data-role="button" id="btn_gotohomepage" class="button_eclipse">my account</a>      <a data-role="button" id="btn_gotologinpage" class="button_eclipse">services</a>     <a data-role="button" id="btn_gotolistpage" class="button_eclipse">offers</a>                     </div> 

css:

#button-container {     width: 145px;     height: 255px;     margin:0 auto; }  .button_eclipse {     width: 100px !important;     height: 100px !important;     border-radius: 50% !important;     color: rgb(255,255,255) !important; }  .button_eclipse .ui-btn-inner {     border-radius: 50% !important;     height: 80% !important; }  .button_eclipse .ui-btn-inner  .ui-btn-text {      display: block !important;     margin: 28px 0 0 -17px;     width: 95px !important;     height: 20px !important;     text-align: center !important;     /* text changes */     font: 14px calibri,arial !important;       text-shadow:1px 1px #ad4816 !important; }  #btn_gotohomepage {     background: rgb(247,107,33) !important;     }  #btn_gotologinpage {     background: rgb(255,165,33) !important;       margin: -30px 0 0 40px; }  #btn_gotolistpage {     background: rgb(157,16,33) !important;       margin: -30px 0 0 0;     } 

edit :

here's solution centered horizontally , vertically : http://jsfiddle.net/ey6yb/3/