如何在jQuery移动网格中居中显示按钮图标

我试图在jQuery移动网格中对齐按钮图标。但似乎一切都不起作用。目前，默认情况下，所有三个图标都是左对齐的。我想将最左边的图标“right”、中间的图标“center”和最右边的图标“left”对齐。以下是我的基本标记：

<div data-role="header" data-position="fixed">
    <h1>Test Header</h1>
</div>
<div data-role="content" class="blink" class="ui-body" id="quotation_wrapper">              
    <div id="test_row">
        <div id="test_div">
            <p id="test_text"></p>
        </div>              
    </div>
    <div id="navigation_button_row">
        <div class="ui-grid-b" data-iconpos="centre">
            <div class="ui-block-a right"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-arrow-l">Previous</button></div>
            <div class="ui-block-b centre"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-recycle">Random</button></div>
            <div class="ui-block-c left"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-arrow-r">Next</button></div>
        </div>
    </div>
</div>

<div data-role="footer" data-position="fixed">
    <h4>Test Footer </h4>
</div>

---

我觉得这个问题的答案很基本，但我还是找不到。下面是JSFIDLE上的相同代码：

添加

显示：内联块用于
.ui-grid-b按钮

.ui-grid-b button{
    display: inline-block;

}

例如
也许如此@Dmitry。非常感谢<代码>显示：内联块

像一个符咒一样工作。

.ui-grid-b button{
    display: inline-block;

}