JQuery Mobileのセンタリング要素

StackOverflow https://stackoverflow.com/questions/4329866

  •  29-09-2019
  •  | 
  •  

質問

jQueryモバイルフレームワークには、要素、特にボタンを中心にする方法がありますか？デフォルトですべてを左調整するように見えますが、これを行う方法（フレームワーク内）を見つけることができません。

役に立ちましたか？

解決

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>

他のヒント

過剰なアプローチ：DIVのインラインCSSでトリックを行いました。

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

魅力のようなセンター！

これを何度も使用しない状況（つまり、スタイルシートでは必要ありません）では、インラインスタイルのステートメントは通常、スタイルシートの場合はどこでも機能します。例えば： 

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

最良の選択肢は、中心にしたい要素を置くことです div このような：

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

およびCSSまたはインラインスタイル：

.center {  
      text-align:center  
 }

ここで言及されている他の方法のいくつかに問題が見つかりました。別の方法は、レイアウトグリッド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 -->

これらの答えだけでは私のために働きませんでした。私はそれらを組み合わせる必要がありました。 （たぶん、それは私がボタンとして入力されたリンクではなく「ボタン」タグを使用しているからですか？）

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

ボタンをアンカー要素にし、属性のある段落に置くことができます。 

align='center'

私のために働いた。

ラッパー内のアイテムのみを正しく中央に配置するには、これを使用します。 （すべてのオプションを組み合わせたものは、クロスブラウザーを動作させる必要があります）そうでない場合は、ここに返信を投稿してください！

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

これは機能します

HTML

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

CSS

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

要件として調整します

   .ui-btn{
      margin:0.5em 10px;
    }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top