Centrage des éléments dans jQuery Mobile

Question

Le framework jQuery Mobile permet-il de centrer des éléments, notamment des boutons? Il semblerait que tout s'aligne à gauche par défaut et je ne trouve pas le moyen (dans le cadre) de le faire.

Answer 1

jQuery Mobile ne semble pas avoir une classe css pour centrer les éléments (j'ai recherché dans son css).

Mais vous pouvez écrire votre propre css il y a une recommandation d'utiliser vos propres styles pour certains éléments. Essayez de créer votre propre

.center-button{
margin: 0 auto;
}

exemple de code HTML:

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

et voir ce qui se passe. Vous pouvez avoir besoin text-align au centre dans l'emballage marque, de sorte que ce serait mieux:

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

exemple de code HTML:

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

Answer 2

Une approche excessive: dans les CSS en ligne dans la division a fait le tour:

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

Des centres comme un charme!

Answer 3

Dans les cas où vous n'allez PAS utiliser ceci à maintes reprises (c.-à-d. Que vous n'avez pas besoin de votre feuille de style), les instructions de style en ligne fonctionnent généralement n'importe où dans la feuille de style. Par exemple:

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

Answer 4

La meilleure option serait de mettre n'importe quel élément que vous voulez centrer dans un div comme ceci:

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

et css ou style inline:

 .center {  
      text-align:center  
 }
 

Answer 5

Aucune de ces réponses seules n'a fonctionné pour moi. Je devais les combiner. (C'est peut-être parce que j'utilise une balise "button" et pas un lien tapé comme un bouton?)

Dans le HTML:

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

En CSS:

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