CODEWITHSUNDEEP
jquerycssjquery-mobile
Ankit
Ankit

Reputation: 65

How to centre button icons in jQuery Mobile grid

I am trying to align button icons in jQuery Mobile grid. But nothing seems to be working. Currently, all three icons are left aligned by default. I want to align the left most icon "right", the centre icon "centre" and the right most icon "left". Below is my basic markup:

<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" and data-iconpos="left" are not working. Nor does the following CSS:

.right {
    text-align: right;
}

.centre {
    text-align: centre;
}

.left{
    text-align: left;
}

I feel that the answer to this question is very basic but still it eludes me. Here is the same code on jsfiddle: http://jsfiddle.net/sharanankit18/ch51obog/1/

Upvotes: 0

Views: 1210

Answers (1)

Dmitriy
Dmitriy

Reputation: 4503

add display: inline-block; for .ui-grid-b button

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

}

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

Upvotes: 2

Related Questions