Question

jQuery Mobile框架是否有一种集中元素的方式，特别是按钮？看起来它默认为左对齐所有内容，我无法找到一种方法（在框架内）来执行此操作。

Answer 1

jQuery Mobile似乎没有css类来居中元素（我搜索了它的css）。

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

尝试创建自己的：

.center-button{
  margin: 0 auto;
}

示例HTML：

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

看看会发生什么。您可能需要在换行标记中将text-align设置为居中，这样可能会更好：

.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

最好的选择是将您希望以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

<input type="file" id="pliki" name="pliki[]" multiple>

Answer 6

这些答案都不适用于我。我不得不把它们结合起来。（也许是因为我使用的是“按钮”标签而不是键入的按钮？）

在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

您可以将按钮设置为锚元素，并将其放在具有以下属性的段落中：

align='center'

为我工作。

Answer 8

让它们正确居中并且只针对包装器内的项目.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;
    }

jQuery Mobile中的中心元素

10 个答案: