Centrare elementi in jQuery Mobile

Question

Il quadro jQuery Mobile hanno un modo di elementi di centraggio, in particolare i pulsanti? Sembra che il valore predefinito è di sinistra-allineamento tutto e non riesco a trovare un modo (nel quadro) per fare questo.

Answer 1

jQuery Mobile non sembra avere una classe CSS per gli elementi centrali (ho cercato attraverso la sua css).

Ma si può scrivere il proprio css aggiuntivo.

Prova a creare il proprio:

.center-button{
  margin: 0 auto;
}

Esempio HTML:

<div data-role="button" class="center-button">button text</div>

e vedere cosa succede. Potrebbe essere necessario set text-align al centro nel tag involucro, quindi questo potrebbe funzionare meglio:

.center-wrapper{
  text-align: center;
}
.center-wrapper * {
  margin: 0 auto;
}

Esempio HTML:

<div class="center-wrapper">
  <div data-role="button">button text</div>
</div>

Answer 2

Un approccio Overkill: in css inline nel div ha fatto il trucco:

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

Centri come un fascino!

Answer 3

Nel caso in cui non si ha intenzione di utilizzare questo più e più volte (cioè non necessari nel foglio di stile), dichiarazioni di stile in linea di solito lavorano ovunque avrebbero lavorato inyour foglio di stile. Per esempio:

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

Answer 4

L'opzione migliore sarebbe quella di mettere ogni elemento che si desidera essere centrato in un div in questo modo:

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

e css o stile in linea:

.center {  
      text-align:center  
 }

Answer 5

avevo trovato problemi con alcuni degli altri metodi qui menzionati. Un altro modo per farlo sarebbe di layout di utilizzo della rete B, e mettere il contenuto nel blocco b, e blocca lasciato e vuoto C.

http://demos.jquerymobile.com/1.1. 2 / docs / content / contenuti-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

Nessuna di queste risposte da solo ha lavorato per me. Ho dovuto combinarli. (Forse è perché sto utilizzando un tag "bottone" e non un link digitato come un bottone?)

Nel HTML:

<div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div>

Nel CSS:

.center-wrapper {
    text-align: center;
    width: 300px;
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
    align:center;
    text-align:center;
}

Answer 7

È possibile effettuare il pulsante di un elemento di ancoraggio, e metterlo in un paragrafo con l'attributo:

align='center'

ha lavorato per me.

Answer 8

Per averli centrato correttamente e solo per gli elementi all'interno del involucro .center-wrapper utilizzare questo. (Tutte le opzioni combinate dovrebbero funzionare cross browser), se non si prega di inviare una risposta qui!

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

Answer 9

Questo funziona

HTML

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

Css

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

Answer 10

Regolare come vostro requisito

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