想創建一個像我想酷似演示圖像創建一個HTML頁面下方

-1

所示的圖像按鈕：想創建一個像我想酷似演示圖像創建一個HTML頁面下方

enter image description here

我創建使用錨標記數據角色=按鈕，所有三個按鈕相應的顏色和文字。但現在我想要的是以圖片顯示的方式對齊這些圈子，並將它們放在html頁面的中心。請幫幫我。

在此先感謝。

來源

2013-07-11 Rachna

用你的代碼** [JSFiddle]（http://jsfiddle.net/）**創建一個小提琴。儘管您可能需要使用'position：absolute;'來讓它們重疊。 –

你需要證明你對你試圖獲得幫助有什麼基本的瞭解。添加圖像不會這樣做。 Ps你可以將圖像嵌入到問題中，你不需要使用github – Liam

@Liam你不需要一定數量的代表來嵌入圖像嗎？ – Neil

工作示例：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;  
}

編輯：

下面是水平和垂直方向爲中心的解決方案：http://jsfiddle.net/Ey6Yb/3/

來源

2013-07-11 11:12:00 Gajotres

非常感謝您的答覆。 – Rachna

你是否也需要垂直居中？ – Gajotres

是的，如果可能的話請告訴。 – Rachna

變化與下面的腳本CSS文件：

.ui-content { 
    border-width: 0; 
    margin: 0 auto; 
    overflow-x: hidden; 
    overflow-y: visible; 
    padding: 15px; 
    width: 150px; 
} 

.btn_eclipse_services { 
    background: none repeat scroll 0 0 #FFA521 !important; 
    border: 0 none !important; 
    border-radius: 50% 50% 50% 50% !important; 
    color: #FFFFFF !important; 
    height: 100px !important; 
    margin-left: 35px; 
    margin-top: -30px; 
    width: 100px !important; 
} 

.btn_eclipse_offers { 
    background: none repeat scroll 0 0 #9C1021 !important; 
    border: 0 none !important; 
    border-radius: 50% 50% 50% 50% !important; 
    color: #FFFFFF !important; 
    height: 100px !important; 
    margin-top: -30px; 
    width: 100px !important; 
}

演示：

enter image description here