53

jQuery Mobile 框架是否有一种使元素居中的方式，特别是按钮？看起来它默认为左对齐所有内容，我找不到（在框架内）这样做的方法。

4

10 回答 10

77

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>
于 2010-12-09T09:16:49.130 回答
14

一种矫枉过正的方法：在 div 中的内联 css 中做到了：

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

中心就像一个魅力！

于 2011-10-24T19:18:20.960 回答
3

在您不打算一遍又一遍地使用它的情况下（即在您的样式表中不需要），内联样式语句通常可以在它们在您的样式表中起作用的任何地方工作。例如：

<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
于 2011-07-16T23:19:03.183 回答
2

最好的选择是将您想要居中的任何元素放在div这样的位置：

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

和 css 或内联样式：

.center {  
      text-align:center  
 }
于 2014-04-22T14:24:33.070 回答
1

我发现这里提到的其他一些方法存在问题。另一种方法是使用布局网格 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 -->

于 2016-04-28T21:29:12.967 回答
0

这有效

HTML

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

CSS

#wrapper { 
    margin:0 auto;
    width:1239px;
    height:1022px;
    background:#ffffff;
    position:relative;
}
于 2013-08-19T23:26:20.827 回答
0

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

align='center'

为我工作。

于 2012-07-23T18:33:50.503 回答
0

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

在 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;
}
于 2012-07-11T05:53:29.913 回答
0

要使它们正确居中并且仅用于包装器 .center-wrapper 内的项目，请使用此选项。（所有选项组合应该可以跨浏览器工作）如果不是，请在此处回复！

.center-wrapper .ui-btn-text {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}
于 2012-11-05T15:49:00.673 回答
0

根据您的要求进行调整

   .ui-btn{
      margin:0.5em 10px;
    }
于 2016-10-31T16:26:54.537 回答