Centrage d’éléments dans jQuery Mobile

Le framework jQuery Mobile a-t-il un moyen de centrer les éléments, en particulier les boutons? Il semble que par défaut, tout soit aligné à gauche et que je ne trouve pas le moyen (dans le cadre) de le faire.

jQuery Mobile ne semble pas avoir de classe CSS pour centrer les éléments (j’ai cherché dans son css).

Mais vous pouvez écrire votre propre CSS supplémentaire.

Essayez de créer le vôtre:

.center-button{ margin: 0 auto; } 

exemple HTML:

 
button text

et voir ce qui se passe. Vous devrez peut-être définir text-align au centre de la balise d’emballage, afin que cela fonctionne mieux:

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

exemple HTML:

 
button text

Une approche exagérée: dans css inline dans le div a fait l’affaire:

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

Des centres comme un charme!

Dans le cas où vous n’allez pas utiliser cela encore et encore (c.-à-d. Pas nécessaire dans votre feuille de style), les instructions de style en ligne fonctionnent généralement partout où elles fonctionneraient dans votre feuille de style. Par exemple:

 

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

  

et css ou style en ligne:

 .center { text-align:center } 

J’ai trouvé des problèmes avec certaines des autres méthodes mentionnées ici. Une autre façon de le faire serait d’utiliser la grid de mise en page B et de placer votre contenu dans le bloc b et de laisser les blocs a et c vides.

http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html

 
Your Content Here

Aucune de ces réponses seule n’a fonctionné pour moi. Je devais les combiner. (Peut-être que c’est parce que j’utilise une balise “bouton” et non un lien tapé comme un bouton?)

Dans le HTML:

 

En CSS:

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

Vous pouvez faire du bouton un élément d’ancrage et le placer dans un paragraphe avec l’atsortingbut:

 align='center' 

Travaillé pour moi

Pour les centrer correctement et uniquement pour les éléments à l’intérieur du wrapper, .center-wrapper les utilise. (toutes les options combinées devraient fonctionner en inter-navigateur) sinon, merci de poster une réponse ici!

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

Cela marche

HTML

 

Css

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

Ajuster comme votre condition

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