我有制作3个按钮的代码
<style>
.ui-grid-b .ui-input-btn {
font-size: 12px;
text-align: center;
padding: 18px;
}
</style>
<fieldset class="ui-grid-b" style="margin:5px;">
<div class="ui-block-a" >
<input type="button" value="OpenALL" onclick="OpenALL();">
</div>
<div class="ui-block-b" >
<input type="button" value="OpenHash" onclick="OpenHash();">
</div>
<div class="ui-block-c" >
<input type="button" value="OpenBUG" onclick="OpenBUG();">
</div>
</fieldset>
我需要将图像添加到按钮(在文本下方)
各种方法都试过了,结果总是丑陋不居中
我需要图片位于文本下方,并且所有内容都居中。
这是 JSfiddle(我不知道如何添加图像)
http://jsfiddle.net/goldsoft/ukbs8kxg/
我尝试了这个建议的 ezanker,我发现它不在中心,什么是圆形灰色圆圈?
http://jsfiddle.net/goldsoft/ukbs8kxg/
谢谢
最佳答案
经过一番搜索,我终于找到了一个可以正常工作的解决方案。
CSS:
<style>
.ui-grid-b .ui-input-btn {
font-size: 12px;
text-align: center;
}
.button
{
background-image:url("url"); //I used a 16x16 image
background-repeat: no-repeat;
background-position:bottom;
padding-bottom:15px;
}
</style>
HTML:
<fieldset class="ui-grid-b" style="margin:5px;">
<div class="ui-block-a" >
<input type="button" value="OpenALL" onclick="OpenALL();" class="button"/>
</div>
<div class="ui-block-b" >
<input type="button" value="OpenHash" onclick="OpenHash();" class="button"/>
</div>
<div class="ui-block-c" >
<input type="button" value="OpenBUG" onclick="OpenBUG();" class="button"/>
</div>
</fieldset>
这是最终屏幕截图:http://prntscr.com/4d0uul
关于css - 按钮中文本下方的居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25324657/