css - panelgroup - primefaces panel style

¿Cómo alinear PanelGrid al centro? JSF-Primefaces

Question

Sé que hay muchas preguntas sobre este tema, pero nada funcionó para mí correctamente.

Necesito alinear mi PanelGrid al centro (horizontal).

esta es mi panel grid

<p:panelGrid styleClass="panelGridCenter">

y mi CSS:

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

Simplemente alinea el contenido al centro, pero no el panelGrid

Answer 1

El componente JSF <p:panelGrid> representa un elemento HTML <table> que es por defecto un elemento de nivel de bloque . Para centrar el elemento de nivel de bloque en sí, debe establecer su margen horizontal en auto lugar de intentar centrar sus contenidos en línea.

.panelGridCenter {
    margin: 0 auto;
}

Ver también:

• Centre un div en CSS

Answer 2

En caso de que quieras alinear a la derecha

.rightAlign{
     margin-left: auto;
 }

Answer 3

La respuesta anterior es técnicamente correcta pero también incompleta.

Si desea centrar algo así como un div, la técnica anterior de jugar con los márgenes izquierdo y derecho funcionará automáticamente, siempre que su DIV tenga un ancho limitado. Por ejemplo, para que comiences a tener algún efecto deberías poner algo como un ancho = 60%.

Y luego, una vez que se da cuenta de que necesita jugar con anchos fijos ... inmediatamente se le pide que haga la siguiente pregunta: Entonces, ¿qué debería escribir exactamente como mi ancho fijo?

Es por eso que creo que la mejor respuesta para esta pregunta es: las técnicas de CSS como la anterior, están bien para los pequeños detalles en una página web. Pero su enfoque de grano grueso para centrar cualquier cosa en una página web debería ser hacer uso de un sistema de grillas. La mayoría de los sistemas de grillas usan 12 celdas. Si, por ejemplo, su sistema de cuadrícula sería por defecto, haga 12 celdas = 100% de ancho. Podría centrar algo, por ejemplo, colocando su contenido centrado en celdas [5-8] omitiendo como celdas espaciales centurión [1-4] y celdas [9-12].

Aquí hay un ejemplo basado en el sistema de cuadrículas de caras 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>

Los comentarios en el formulario anterior deberían dejar bastante claro lo que quise decir anteriormente. El sistema de grillas normalmente ofrecerá clases de CSS para permitir que su UI funcione en múltiples factores de forma de dispositivos, aunque ... en este sentido soy de la opinión de que no se puede hacer una buena UI móvil utilizando una IU de escritorio ni una buena interfaz de usuario de escritorio con una interfaz de usuario móvil. En mi opinión, puede preparar una buena IU de tableta / escritorio, pero debe escribir páginas desde cero con los contenidos necesarios para el móvil. Pero esa es una discusión diferente ... solo para decir, que las clases flex grid css solo te llevarán tan lejos. Un gran potencial en teoría, mucho mejor que la codificación dura de cierta longitud arbitraria en los elementos de tu div ... pero tampoco es una panacea para todos tus problemas.