当前位置：文江博客话题详情

jQuery Mobile 中的居中元素

发布于 2024-10-05 03:41:02 字数 79 浏览 4 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你与昨日 2024-10-12 03:41:03

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

在 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;
}

None of these answers alone worked for me. I had to combine them. (Maybe it is because I'm using a "button" tag and not a link typed as a button?)

In the HTML:

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

In the CSS:

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

回复收藏 0 原文

要走就滚别墨迹 2024-10-12 03:41:03

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

align='center'

为我工作。

You can make the button an anchor element, and put it in a paragraph with the attribute:

align='center'

Worked for me.

回复收藏 0 原文

破晓 2024-10-12 03:41:03

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

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

To have them centered correctly and only for the items inside the wrapper .center-wrapper use this. ( all options combined should work cross browser ) if not please post a reply here!

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

回复收藏 0 原文

素染倾城色 2024-10-12 03:41:03

这适用于

HTML

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

Css

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

This works

HTML

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

Css

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

回复收藏 0 原文

黯然 2024-10-12 03:41:03

根据您的要求进行调整

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

Adjust as your requirement

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

回复收藏 0 原文

以酷 2024-10-12 03:41:02

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

但您可以编写自己的附加 css。

尝试创建您自己的：

.center-button{
  margin: 0 auto;
}

示例 HTML：

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

并看看会发生什么。您可能需要将文本对齐设置为包装标签的中心，这样可能效果更好：

.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 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>

回复收藏 0 原文

吾家有女初长成 2024-10-12 03:41:02

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

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

像魅力一样中心！

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!

回复收藏 0 原文

请爱~陌生人 2024-10-12 03:41:02

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

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

In the situation where you are NOT going to use this over and over (i.e. not needed in your style sheet), inline style statements usually work anywhere they would work inyour style sheet. E.g:

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

回复收藏 0 原文

遥远的绿洲 2024-10-12 03:41:02

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

 
            
        

和 css 或内联样式：

<前><代码>.center {
文本对齐：居中
}

The best option would be to put any element you want to be centered in a div like this:

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

and css or inline style:

.center {  
      text-align:center  
 }

回复收藏 0 原文

淡写薰衣草的香 2024-10-12 03:41:02

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

I had found problems with some of the other methods mentioned here. Another way to do it would be to use layout grid B, and put your content in block b, and leave blocks a and c empty.

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 -->

回复收藏 0 原文

~没有更多了~