按钮中文本下方的中心图像

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