53

Does the jQuery Mobile framework have a way of centering elements, specifically buttons? It looks like it defaults to left-aligning everything and I can't find a way (within the framework) to do this.

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の場合：

<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

ボタンをアンカー要素にして、次の属性を持つ段落に配置できます。

align='center'

私のために働いた。

于 2012-07-23T18:33:50.503 に答える
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

これは動作します

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

要件に合わせて調整

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