如何在jQuery移動網格中居中按鈕圖標

Question

我想在jQuery Mobile網格中對齊按鈕圖標。但似乎沒有任何工作。目前，所有三個圖標默認保持對齊。我想將最左側的圖標「右側」，中央圖標「中央」和最右側的圖標「左側」對齊。下面是我的基本標記：

<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

添加display: inline-block;爲.ui-grid-b button

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

} 

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