web-dev-qa-db-fra.com

Comment aligner PanelGrid sur le centre? JSF-Primefaces

Je sais qu'il y a beaucoup de questions sur cette question, mais rien ne fonctionnait correctement pour moi. 

Je dois aligner mon PanelGrid sur le centre (horizontal).

c'est mon panelgrid 

<p:panelGrid styleClass="panelGridCenter">

et mon CSS: 

.panelGridCenter td,.panelGridCenter tr {
    text-align: center;
}

Il aligne simplement le contenu au centre, mais pas le panelGrid

cssjsfprimefacespanel
24
Johnny2012

Le composant JSF <p:panelGrid> restitue un élément HTML <table> qui est par défaut un élément de niveau block . Pour centrer l'élément de niveau de bloc lui-même, vous devez définir sa marge horizontale sur auto au lieu de tenter de centrer son contenu intégré. 

.panelGridCenter {
    margin: 0 auto;
}

Voir également:

47
BalusC

La réponse ci-dessus est techniquement correcte mais également incomplète.

Si vous voulez centrer quelque chose comme une div, la technique ci-dessus consistant à jouer avec les marges gauche et droite comme automatique fonctionnera, à condition que votre DIV ait une largeur limitée . E.g. Pour que vous commenciez à produire n'importe quel effet, vous devez mettre quelque chose comme une largeur = 60%.

Et puis, une fois que vous réalisez que vous devez jouer avec des largeurs fixes ... vous êtes immédiatement invité à la question suivante: Alors, que dois-je saisir exactement comme ma largeur fixe?

C’est la raison pour laquelle j’estime que la meilleure réponse à cette question est la suivante: Les techniques CSS comme celle ci-dessus conviennent aux petits détails d’une page Web . Cependant, votre approche à grain grossier pour centrer quoi que ce soit sur une page Web devrait être pour utiliser un système de grille . La plupart des systèmes de grille utilisent 12 cellules . Si par exemple votre système de grille serait par défaut faire 12 cellules = 100% largeur . Vous pouvez centrer quelque chose par, pour Exemple: placer votre contenu de manière à être centré dans les cellules [5-8] en laissant comme cellules de l'espace centurion [1-4] et cellules [9-12].

Voici un exemple basé sur le système de grille de faces principales:

  <h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
  <form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
    <!-- (a) Start a grid system-->
    <div class="ui-g ui-fluid">

      <!-- (b) Eat the first four cells of the grid -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (c) In the center location of the grid put in the Login form -->
      <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
          <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
          <input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
        </div>
        <div class="ui-inputgroup">
          <span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
          <input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
        </div>
      </div>

      <!-- (d) Eat the rest of the first row of the grid without setting any contents -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (e) Start the second row and eat the first four cells -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (f) Position a form submit button on the fifth cell -->
      <div class="ui-g-12 ui-md-1">
        <button id="loginSubmit" pButton type="submit" label="Submit"></button>
      </div>
    </div>
  </form>

Les commentaires sur le formulaire ci-dessus devraient préciser assez clairement ce que je voulais dire plus haut ... Le système de grille proposera normalement des classes CSS pour permettre à votre interface utilisateur de fonctionner avec plusieurs facteurs de forme de périphériques, bien que ... à cet égard, je suis Selon moi, vous ne pouvez pas créer une bonne interface utilisateur mobile à l'aide d'une interface utilisateur de bureau, ni une bonne interface utilisateur de bureau à l'aide d'une interface utilisateur mobile . À mon avis, vous pouvez obtenir une bonne interface utilisateur tablette/ordinateur de bureau, mais vous devez écrire des pages à partir de grattez avec le contenu minimal et nécessaire pour mobile. Mais c'est une discussion différente ... juste pour dire, que les classes css flex grid ne vous mèneront que jusqu'à présent. Beaucoup de potentiel en théorie, bien mieux que de coder en dur une longueur fixe arbitraire sur vos éléments div ... mais pas une solution miracle pour tous vos problèmes.

1
99Sono

Au cas où si vous voulez bien aligner

.rightAlign{
     margin-left: auto;
 }
0
fjkjava