عناصر تركز في jQuery Mobile

Question

هل لدى إطار عمل jQuery وسيلة لتوسيط العناصر ، على وجه التحديد الأزرار؟ يبدو أنه الافتراضي على كل شيء محاذاة اليسار ولا يمكنني العثور على طريقة (في الإطار) للقيام بذلك.

Answer 1

لا يبدو أن 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>

Answer 2

نهج المبالغة: في CSS المضمّن في DIV قامت بالخدعة:

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

مراكز مثل السحر!

Answer 3

في الموقف الذي لن تستخدم فيه هذا مرارًا وتكرارًا (على سبيل المثال ، لا يلزم الحاجة في ورقة الأنماط الخاصة بك) ، عادة ما تعمل عبارات النمط المضمّن في أي مكان تعمل في ورقة نمط inyour. على سبيل المثال:

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

Answer 4

الخيار الأفضل هو وضع أي عنصر تريد أن تتمحوره في أ div مثله:

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

و CSS أو النمط المضمّن:

.center {  
      text-align:center  
 }

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

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

Answer 7

يمكنك جعل الزر عنصر مرساة ، ووضعه في فقرة مع السمة:

align='center'

عملت بالنسبة لي.

Answer 8

لجعلها تركز بشكل صحيح وفقط للعناصر الموجودة داخل Wrapper .Center-Wrapper استخدم هذا. (يجب أن تعمل جميع الخيارات مجتمعة على متصفح المتقاطع) إن لم يكن ، يرجى نشر الرد هنا!

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

Answer 9

هذا يعمل

لغة البرمجة

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

CSS

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

Answer 10

اضبط كمتطلباتك

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