Централна контролна група в jQuery Mobile

Имам контролна група в jQuery Mobile, която е част от долния колонтитул:

<div data-role="controlgroup" data-type="horizontal">
  <a data-role="button" data-icon="toomanynotes-back" data-iconpos="notext"></a>
  <a data-role="button" data-icon="toomanynotes-play" data-iconpos="notext"></a>
  <a data-role="button" data-icon="toomanynotes-next" data-iconpos="notext"></a>
</div>

Изглежда добре, но винаги е възможно най-наляво в долния колонтитул. Намерих тази публикация във форум , но не ми се получи. Как мога да центрирам контролната група (хоризонтално) в долен колонтитул?


javascript html jquery footer jquery-mobile
person Linuxios    schedule 14.07.2012    source източник
comment
идентичен въпрос и решение за JQM 1.1.1: stackoverflow.com/questions/11503603/   -  person Frank    schedule 19.07.2012

Отговори (5)


arrow_upward
3
arrow_downward

В jQuery Mobile 1.3.1 просто поставете този код във вашия CSS:

.ui-field-contain .ui-controlgroup,
.ui-field-contain fieldset.ui-controlgroup {
    text-align: center;
}

.ui-field-contain .ui-controlgroup-controls {
    width: auto;
}
person Ricardo Torres    schedule 30.05.2013
comment
Това изглежда интересно. Вече не работя в проекта, но може да опитам това. - person Linuxios; 31.05.2013

arrow_upward
1
arrow_downward

Това изглежда се е променило в jqm 1.1.1. подравняване на текст: център; работи, но сега не.

person tj_carroll    schedule 16.07.2012

arrow_upward
0
arrow_downward

Оказва се, че някои други свойства на CSS работят:

#playdiv {
    font-size:1.0em;
    margin: 0 auto;
    width:100%;
    text-align: center;
    position:relative;
    left:50%
}
person Linuxios    schedule 14.07.2012
comment
Добре, че работи за вас, b/c не изглежда, че това е правилният подход. left:50% подравнява левия край на div в центъра на екрана, не центрира div хоризонтално. Твърдо кодирана стойност за лявата страна също не работи, ако промените размера на браузъра, контролната група вече не изглежда подравнена в центъра. - person Samik R; 17.08.2012
comment
@SamikR: Благодаря за информацията. Нямам много опит в JQ и JS, така че, моля, кажете ми дали има по-добро решение. - person Linuxios; 17.08.2012

arrow_upward
0
arrow_downward

Единственото нещо, което трябваше да направя в 1.2.0, е да го центрирам с помощта на text-align: center

person Community    schedule 16.12.2012
comment
Благодаря за отговора, но това трябва да е коментар. - person Linuxios; 16.12.2012

arrow_upward
0
arrow_downward

Загубих около два часа, опитвайки се да центрирам бутони, като модифицирах CSS. Бих силно препоръчал вместо това да използвате решетка за оформление.

<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>     
</fieldset>

Източник: http://demos.jquerymobile.com/1.3.0-rc.1/docs/content/content-grids.html

person riverrunner    schedule 16.02.2014