在按钮中文本下居中显示图像
在按钮中文本下居中显示图像
提问于 2014-08-15 18:07:51
我有这个代码来制作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/
谢谢
回答 1
Stack Overflow用户
发布于 2014-08-15 19:00:45
经过一番搜索，我终于找到了一个工作正常的解决方案。
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25324657
复制相关文章
相似问题
腾讯云开发者
