CODEWITHSUNDEEP
jquery-mobile
gruner
gruner

Reputation: 1570

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.

Upvotes: 53

Views: 105700

Answers (10)

Muhammad Tariq
Muhammad Tariq

Reputation: 23

Adjust as your requirement

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

Upvotes: 0

Uniphonic
Uniphonic

Reputation: 875

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

<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 -->

Upvotes: 1

naugtur
naugtur

Reputation: 16915

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>

Upvotes: 77

azerafati
azerafati

Reputation: 18583

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  
 }

Upvotes: 2

Giri
Giri

Reputation: 565

This works

HTML

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

Css

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

Upvotes: 0

Rubytastic
Rubytastic

Reputation: 15491

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;
}

Upvotes: 0

husam
husam

Reputation: 1

You can make the button an anchor element, and put it in a paragraph with the attribute: 

align='center'

Worked for me.

Upvotes: 0

Peter
Peter

Reputation: 49

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;">

Upvotes: 3

Doug
Doug

Reputation: 5266

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:

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

In the CSS:

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

Upvotes: 0

Bill
Bill

Reputation: 149

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!

Upvotes: 14

Related Questions