web-dev-qa-db-fra.com

Centrage des éléments dans jQuery Mobile

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

jquery-mobile
52
gruner

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

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

Essayez de créer le vôtre:

.center-button{
  margin: 0 auto;
}

exemple HTML:

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

et voir ce qui se passe. Vous devrez peut-être définir text-align sur le centre de la balise wrapping pour que cela fonctionne mieux:

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

exemple HTML:

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

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!

14
Bill

Dans les cas où vous n'allez PAS utiliser ceci à maintes reprises (c'est-à-dire 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;">
3
Peter

La meilleure option serait de placer tout élément que vous voulez centrer dans une div comme ceci:

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

et css ou style inline:

.center {  
      text-align:center  
 }
2
azerafati

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 grille de présentation B, 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

<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 -->

1
Uniphonic

Ajustez selon vos besoins

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

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;
}
0
Doug

Vous pouvez faire du bouton un élément d'ancrage et le placer dans un paragraphe avec l'attribut suivant: 

align='center'

Travaillé pour moi.

0
husam

Pour les centrer correctement et uniquement pour les éléments à l'intérieur de l'emballage .center-wrapper, utilisez ceci. (toutes les options combinées devraient fonctionner avec plusieurs navigateurs). Dans le cas contraire, envoyez 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;
}
0
Rubytastic

Cela marche

HTML

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

Css

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