jQuery Mobile 中的元素居中答案

【问题标题】：Centering elements in jQuery MobilejQuery Mobile 中的元素居中
【发布时间】：2011-05-18 19:25:24
【问题描述】：

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

【问题讨论】：

【解决方案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>

【讨论】：

我刚刚发现设置边距不会使 jQuery Mobile 内联按钮居中 - 对于那些你可能不得不使用 .center-wrapper 类的人。
内联按钮是内联的；）顾名思义，CSS display:inline 不能这样工作。但是您可能通过此评论为一些人节省了一些时间。
能否请您添加 HTML 代码示例以获取“完整”内容？非常感谢！
我已经添加了 HTML 示例，但是可以使用这个答案中的类和几十个不同的标签。并且示例显然假设对按钮进行了其他操作，因为普通的块按钮具有width:auto，因此它需要全宽。
` .csstag { text-align : center !important; } `

【解决方案2】：

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

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

中心就像一个魅力！

【讨论】：

借用@andufo：总是将内容和样式分开。总是。

【解决方案3】：

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

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

【讨论】：

始终将内容和样式分开。总是。

【解决方案4】：

最好的选择是将您想要居中的任何元素放在div 中，如下所示：

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

和 css 或内联样式：

.center {  
      text-align:center  
 }

【讨论】：

【解决方案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 -->

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案7】：

你可以让按钮成为一个锚元素，并把它放在一个带有属性的段落中：

align='center'

为我工作。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案9】：

这行得通

HTML

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

CSS

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

【讨论】：

【解决方案10】：

根据您的要求调整

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

【讨论】：

感谢您的回答，但非常简短。希望观众能清楚地看到这是一个 CSS 样式表编辑。