Centering elements in jQuery Mobile

Question

Does the jQuery Mobile framework have a way of centering elements  specifically buttons  It looks like it defaults to left-aligning everything and I can t find a way  within the framework  to do this

User · Answer

I had found problems with some of the other methods mentioned here. Another way to do it would be to use layout grid B, and put your content in block b, and leave blocks a and c empty.

http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html

_x000D_

<div class="ui-grid-b">_x000D_
 <div class="ui-block-a"></div>_x000D_
 <div class="ui-block-b">Your Content Here</div>_x000D_
 <div class="ui-block-c"></div>_x000D_
</div><!-- /grid-b -->

_x000D_

User · Answer

An overkill approach  in inline css in the div did the trick   style  margin 0 auto  margin-left auto  margin-right auto  align center  text-align center     Centers like a charm

User · Answer

The best option would be to put any element you want to be centered in a div like this             lt div class  center  gt               lt img src  images logo png    gt           lt  div gt     and css or inline style     center           text-align center

User · Answer

None of these answers alone worked for me  I had to combine them   Maybe it is because I m using a  button  tag and not a link typed as a button    In the HTML    lt div class  center-wrapper  gt  lt button type  submit  data-theme  b  gt Login lt  button gt  lt  div gt    In the CSS    center-wrapper       text-align  center      width  300px      margin 0 auto      margin-left auto      margin-right auto      align center      text-align center

User · Answer

Adjust as your requirement      ui-btn        margin 0 5em 10px

User · Answer

This works  HTML   lt section id  wrapper  gt       lt div data-role  page  gt       lt  div gt   lt  section gt    Css   wrapper        margin 0 auto      width 1239px      height 1022px      background  ffffff      position relative

User · Answer

To have them centered correctly and only for the items inside the wrapper  center-wrapper use this    all options combined should work cross browser   if not please post a reply here    center-wrapper  ui-btn-text       overflow  hidden      text-align  center      text-overflow  ellipsis      white-space  nowrap      text-align  center      margin  0 auto

User · Answer

You can make the button an anchor element  and put it in a paragraph with the attribute    align  center    Worked for me

User · Answer

jQuery Mobile doesn t seem to have a css class to center elements  I searched through its css    But you can write your own additional css   Try creating your own    center-button    margin  0 auto      example HTML    lt div data-role  button  class  center-button  gt button text lt  div gt    and see what happens  You might need to set text-align to center in the wrapping tag  so this might work better    center-wrapper    text-align  center     center-wrapper       margin  0 auto      example HTML    lt div class  center-wrapper  gt     lt div data-role  button  gt button text lt  div gt   lt  div gt

User · Answer

In the situation where you are NOT going to use this over and over  i e  not needed in your style sheet   inline style statements usually work anywhere they would work inyour style sheet  E g     lt div data-role  controlgroup  data-type  horizontal  style  text-align center   gt

[jquery-mobile] Centering elements in jQuery Mobile

Examples related to jquery-mobile