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

Question

我正在尝试对齐 jQuery 移动网格中的按钮图标。但似乎没有任何效果。目前，所有三个图标都默认左对齐。我想对齐最左边的图标 "right"、中间的图标 "centre" 和最右边的图标 "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>

data-iconpos="right" 和 data-iconpos="left" 不工作。以下 CSS:

也没有

.right {
    text-align: right;
}

.centre {
    text-align: centre;
}

.left{
    text-align: left;
}

我觉得这个问题的答案很基础，但我还是不懂。这是 jsfiddle 上的相同代码：http://jsfiddle.net/sharanankit18/ch51obog/1/

Answer 1

为 .ui-grid-b button

添加 display: inline-block;

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

}

示例http://jsfiddle.net/soledar10/o27dvfmo/

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

How to centre button icons in jQuery Mobile grid

css

jquery

jquery-mobile