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

The best option would be to put any element you want to be centered in a div like this:

        <div class="center">
            <img src="images/logo.png" />
        </div>

and css or inline style:

.center {  
      text-align:center  
 }

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

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

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

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

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

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

User · Answer

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

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   x000D   lt div class  ui-grid-b  gt  x000D    lt div class  ui-block-a  gt  lt  div gt  x000D    lt div class  ui-block-b  gt Your Content Here lt  div gt  x000D    lt div class  ui-block-c  gt  lt  div gt  x000D   lt  div gt  lt  --  grid-b -- gt  x000D   x000D   x000D

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

[jquery-mobile] Centering elements in jQuery Mobile

Examples related to jquery-mobile