css - 按钮中文本下方的居中图像

Question

我有制作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/

谢谢

Answer 1

经过一番搜索，我终于找到了一个可以正常工作的解决方案。

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