在jQuery Mobile中集中元素

jQuery Mobile框架是否有一个集中元素的方法，特别是button？ 它看起来像默认左alignment的一切，我不能find一种方法（在框架内）做到这一点。

Answer 1

jQuery Mobile似乎没有一个CSS类来居中元素（我通过它的CSSsearch）。

但是你可以写你自己的额外的CSS。

尝试创build自己的：

.center-button{ margin: 0 auto; } 

示例HTML：

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

看看会发生什么 您可能需要将文本alignment设置在包装标记的中心，所以这可能会更好地工作：

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

示例HTML：

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

Answer 2

一个矫枉过正的方法：在div中的内联CSS做的诀窍：

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

中心就像一个魅力！

Answer 3

在不打算反复使用的情况下（即在样式表中不需要），内联样式语句通常在您的样式表中可以工作的任何位置。 例如：

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

Answer 4

最好的select是把你想要的任何元素居中放置在这样一个div ：

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

和CSS或内联样式：

 .center { text-align:center } 

Answer 5

我发现这里提到的一些其他方法的问题。 另一种方法是使用布局网格B，并将您的内容放在块b中，并将块a和c留空。

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

这些答案都没有为我工作。 我不得不把它们结合起来。 （也许是因为我使用的是“button”标签，而不是buttontypes的链接？）

在HTML中：

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

在CSS中：

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

Answer 7

您可以使button成为一个锚点元素，并将其放在具有以下属性的段落中：

 align='center' 

为我工作。

Answer 8

要让它们正确居中并且只包含在wrapper中的items .center-wrapper使用这个。 （所有选项结合应该跨浏览器）如果没有请在这里发表回复！

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

Answer 9

这工作

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

根据您的要求调整

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