Centering elements in jQuery Mobile

Question

Does the jQuery Mobile framework have the ability to center elements, in particular buttons? It seems that the default is left alignment, and I cannot find a way (within) to do this.

Answer 1

jQuery Mobile doesn't seem to have a css class to center elements (I searched for its css).

But you can write your own additional css.

Try creating your own:

.center-button{ margin: 0 auto; } 

HTML example:

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

and see what happens. You may need to set the alignment of the text to the center in the wrapper tag, so this might work better:

 .center-wrapper{ text-align: center; } .center-wrapper * { margin: 0 auto; } 

HTML example:

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

Answer 2

Abundant approach: in the built-in css in the div did the trick:

 style="margin:0 auto; margin-left:auto; margin-right:auto; align:center; text-align:center;" 

Centers love charm!

Answer 3

In a situation where you are NOT going to use it again and again (i.e. not needed in your stylesheet), inline style statements usually work wherever they work in your stylesheet. For example:

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

Answer 4

A better option would be to put any element you want to center in a div , like this:

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

and css or inline style:

 .center { text-align:center } 

Answer 5

I found problems with some of the other methods mentioned here. Another way to do this is to use breadboard 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

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

Answer 6

None of these answers worked for me. I had to combine them. (Maybe this is because I use the "button" tag, and not the link typed as a button?)

In HTML:

 <div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div> 

In CSS:

 .center-wrapper { text-align: center; width: 300px; margin:0 auto; margin-left:auto; margin-right:auto; align:center; text-align:center; } 

Answer 7

You can make the button an anchor element and place it in the paragraph with the attribute:

 align='center' 

Worked for me.

Answer 8

So that they are centered correctly and only for elements inside the .center-wrapper, use this. (all options in combination should work in a cross browser), if not, write the answer here!

 .center-wrapper .ui-btn-text { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-align: center; margin: 0 auto; } 

Answer 9

It works

HTML

 <section id="wrapper"> <div data-role="page"> </div> </section> 

Css

 #wrapper { margin:0 auto; width:1239px; height:1022px; background:#ffffff; position:relative; } 

Answer 10

Adjust as your requirement

  .ui-btn{ margin:0.5em 10px; }