JSF 구성 요소를 중앙에 맞추는 방법

Question

내 JSF 2 - Primefaces 3 웹 응용 프로그램에서 <p:panelGrid>과 <p:panel>을 사용하고 있습니다. 나는 그 안에 정당화 된 왼쪽에 여러 개의 구성 요소가 있습니다. 나는 모두에게 센터 정렬해야합니다. 우리는 이것을 어떻게 할 수 있습니까 div를 사용하려했지만 작동하지 않습니다.

Answer 1

생성 된 HTML 출력을보고 이에 따라 CSS를 변경하십시오.

당신에 중심을하고자하는 HTML 요소 인 경우 block element (<div>는 <p>는 <form>는 <table>, 등등, 또는 display: block;에 의해 강제), 당신은 먼저에게 알려진 폭을 줄 필요가 그리고 당신은 중앙 수 요소 자체에 대해 CSS margin: 0 auto;을 사용하여 부모 블록 요소에 상대적입니다.

당신이 중심하고자하는 HTML 요소 인 경우가 inline element (<span>, <label>는, <a>는, <img>는 등, 또는 display: inline;에 의해 강제), 다음 상위 블록 요소에 CSS text-align: center;를 사용하여 위치를 지정할 수 있습니다. 당신이 시도 할 수 있습니다 중앙에 panelGrid : 당신이 primefaces의 내용을 설정하려면

Answer 2

우리는 RichFaces를 사용하고 있지만이 경우 사용 된 솔루션은 Primefaces에도 적용될 수 있습니다. 우리는 css로 내부 요소의 스타일을 사용했습니다.
브라우저에서 페이지를 렌더링하고 나면 소스 코드를 검색하여 렌더링되는 HTML 요소를 확인할 수 있습니다.. 그런 다음 특정 CSS 클래스를 만들고 전체 패널 또는 해당 클래스의 panelGrid에있는 내부 요소의 스타일을 지정합니다.

대부분의 경우이 방법이 가장 쉽고 충분합니다.

Answer 3

CSS를 시도하고 p:panelGrid columnClasses은 속성 :

.centered { text-align: center; }

그냥 텍스트가 아닌 당신의 p:panelGrid 열 구성 요소가있는 경우, 추가

이

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> 다음 스타일 시트에 같은 클래스를 생성 CSS 클래스의 여백 속성 :

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

Answer 4

<h:panelGrid column="1"> 

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

      your contents... 

    </h:panelGroup> 

</h:panelGrid>