Menu
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.
843
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
To center a div horizontally on a page, simply set the width of the element and the margin property to auto. That way, the div will take up whatever width is specified in the CSS and the browser will ensure the remaining space is split equally between the two margins.
Using the <center></center> tags One way to center text or put it in the middle of the page is to enclose it within <center></center> tags. Inserting this text within HTML code would yield the following result: Center this text!
Vertically Center Text Using Flexbox You do this by setting the display property to “flex.” Then, define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally. Here's the CSS: HTML.
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!
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
