Как выровнять компоненты JSF по центру

в моем веб-приложении JSF 2 - Primefaces 3 я использую <p:panelGrid> и <p:panel>. У меня есть несколько компонентов внутри них, которые остаются оправданными. Мне нужно, чтобы все были в центре. Как мы можем это сделать, я пытался использовать div, но это не работает.

6
alignment css jsf jsf-2 primefaces

4 ответов

посмотрите на сгенерированный вывод HTML и измените CSS соответственно.

если HTML элемент, который вы хотите центр блочный элемент (<div>, <p>, <form>, <table> и т. д., или принуждают display: block;), то вам сначала нужно дать ему известную ширину, а затем вы можете центрировать его относительно своего родительского элемента блока с помощью CSS margin: 0 auto; о самом элементе.

если HTML элемент, который вы хотите центр inline элемент (<span>, <label>, <a>, <img> и т. д., или принуждают display: inline;), то вы можете центрировать его с помощью CSS text-align: center; на родительском элементе блока.

27

Если вы хотите установить содержимое primefaces: panelGrid в центр, вы можете попробовать следующее:

<h:panelGrid column="1">

   <h:panelGroup style="display:block; text-align:center">

           your contents...

   </h:panelGroup>

</h:panelGrid>
11

мы используем RichFaces, но решение, которое мы использовали в этом случае, может применяться и к Primefaces. Мы использовали для стиля внутренних элементов css.
После того, как вы визуализируете страницу в браузере, вы можете найдите исходный код и узнайте, какие элементы HTML отображаются. Тогда создать определенный CSS классы и стиль всей панели или внутренних элементов в panelGrid для этого класса.

большую часть времени это было самое простое решение а также достаточно.

4

попробуйте с css и p:panelGrid columnClasses атрибутов:

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> затем в вашей таблице стилей создайте класс, например:

.centered { text-align: center; }

если у вас есть компоненты p:panelGrid столбец, отличный от текста, добавьте атрибут margin в свой класс css:

.centered { text-align: center; margin-left: 50%; }

2