Centering elements in jQuery Mobile

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.

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:

<div data-role="button" class="center-button">button text</div>

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:

<div class="center-wrapper">
  <div data-role="button">button text</div>
</div>

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!

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:

<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">

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  
 }