web-dev-qa-db-de.com

Wie richtet man PanelGrid mittig aus? JSF-Primefaces

Ich weiß, dass es viele Fragen zu diesem Thema gibt, aber nichts hat für mich richtig funktioniert. 

Ich muss mein PanelGrid auf die Mitte (horizontal) ausrichten.

das ist mein Panelgrid

<p:panelGrid styleClass="panelGridCenter">

und mein CSS:

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

Der Inhalt wird nur zentriert ausgerichtet, nicht aber das panelGrid

24
Johnny2012

Die JSF-Komponente <p:panelGrid> gibt ein HTML-Element <table> aus, das standardmäßig ein Blockebene-Element ist. Um das Blockebenenelement selbst zu zentrieren, sollten Sie seinen horizontalen Rand auf auto setzen, anstatt zu versuchen, den Inline-Inhalt zu zentrieren. 

.panelGridCenter {
    margin: 0 auto;
}

Siehe auch:

47
BalusC

Die obige Antwort ist technisch korrekt, aber auch unvollständig.

Wenn Sie so etwas wie ein Div zentrieren möchten, funktioniert die obige Technik, mit dem linken und rechten Rand als Auto zu spielen, sofern Ihr DIV eine begrenzte Breite hat. Damit Sie zu einem beliebigen Effekt werden können, müssten Sie so etwas wie eine Breite = 60% setzen.

Und dann, sobald Sie feststellen, dass Sie mit festen Breiten spielen müssen ... werden Sie sofort zur nächsten Frage aufgefordert: Was genau muss ich als feste Breite eingeben?

Aus diesem Grund glaube ich, dass die bessere Antwort auf diese Frage lautet: CSS-Techniken wie die oben stehende sind für die kleinen Details auf einer Webseite in Ordnung ... Aber Ihr grobkörniger Ansatz zur Zentrierung von beliebigen Seiten auf einer Webseite sollte dies Verwenden Sie ein Gittersystem. Die meisten Gittersysteme verwenden 12 Zellen. Wenn beispielsweise Ihr Gittersystem standardmäßig 12 Zellen = 100% Breite wäre, könnten Sie etwas zentrieren, indem Sie z Beispiel: Platzieren Sie Ihren Inhalt in Zellen [5-8] und lassen Sie ihn als Centurion-Weltraumzellen [1-4] und Zellen [9-12] weg.

Hier ist ein Beispiel, das auf dem System der Grundflächen basiert:

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

Die Kommentare zu dem obigen Formular sollten deutlich machen, was ich oben gemeint habe ... Das Rastersystem wird normalerweise CSS-Klassen anbieten, damit Ihre Benutzeroberfläche mit mehreren Formfaktoren von Geräten arbeiten kann, obwohl ... diesbezüglich ich bin der Meinung, dass Sie keine gute mobile Benutzeroberfläche mit einer Desktop-Benutzeroberfläche oder eine gute Desktop-Benutzeroberfläche mit einer mobilen Benutzeroberfläche erstellen können ..__ Meiner Meinung nach können Sie eine gute Tablet/Desktop-Benutzeroberfläche gebacken bekommen, aber Sie sollten Seiten schreiben Scratch mit dem Minimum an notwendigen Inhalten fürs Handy. Aber das ist eine andere Diskussion ... nur um zu sagen, dass die Flex-Grids-Klassen nur Sie so weit bringen werden. ... Viel theoretisches Potenzial, viel besser als hartes Codieren einer beliebigen festen Länge in Ihren div-Elementen ... aber auch nicht für alle Ihre Probleme.

1
99Sono

Wenn Sie rechts ausrichten möchten

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