我想创建一个与演示图像完全相同的html页面:
我使用带有data-role =按钮的锚标记创建了所有三个按钮,并带有相应的颜色和文本。但现在我想要的是以图像显示方式对齐这些圆圈并将它们放在html页面的中心。请帮帮我。
提前致谢。
答案 0 :(得分:2)
使用以下脚本更改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;
}
<强>演示:强>
您可以查看此链接 How to Center Anything With CSS
答案 1 :(得分:2)
工作示例: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/