Центрирование элементов в jQuery Mobile

Ответ 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>

Ответ 2

Подход с избытком: во встроенном css в div сделал трюк:

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

Центры любят очарование!

Ответ 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

Ни один из этих ответов не работал у меня. Мне пришлось их комбинировать. (Может быть, это потому, что я использую тег "button", а не ссылку, набранную как кнопка?)

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