पर जेएसएफ घटकों को संरेखित कैसे करें मेरे जेएसएफ 2 - प्राइमफेसेस 3 वेब एप्लिकेशन में, मैं <p:panelGrid> और <p:panel> का उपयोग कर रहा हूं। मेरे अंदर कई घटक हैं जो उचित हैं। मुझे सभी को केंद्र संरेखित करने की आवश्यकता है। हम यह कैसे कर सकते हैं मैंने div का उपयोग करने की कोशिश की लेकिन यह काम नहीं करता है।जेएसएफ घटकों को
जेनरेट किए गए HTML आउटपुट को देखें और उसके अनुसार सीएसएस बदलें।
तो HTML तत्व है जो आप के लिए केंद्र चाहते हैं एक block element (<div>, <p>, <form>, <table>, आदि, या display: block; ने मजबूर), तो आपको पहले इसे एक ज्ञात चौड़ाई देने के लिए और की जरूरत है तो आप केंद्रित कर सकता है यह तत्व पर स्वयं सीएसएस margin: 0 auto; का उपयोग करके अपने मूल ब्लॉक तत्व से संबंधित है।
HTML तत्व है जो आप केंद्र के लिए करना चाहते हैं, तो एक inline element (<span>, <label>, <a>, <img>, आदि, या display: inline; ने मजबूर), तो आप इसे अपनी मूल ब्लॉक तत्व पर सीएसएस text-align: center; का उपयोग कर केंद्रित कर सकता है।
हम रिचफेस का उपयोग कर रहे हैं, लेकिन इस मामले में हमने जो समाधान इस्तेमाल किया है वह प्राइमफेस पर भी लागू हो सकता है। हम सीएसएस के साथ आंतरिक तत्वों को शैली में इस्तेमाल करते थे।
एक बार जब आप ब्राउज़र में पेज प्रस्तुत करते हैं, तो आप स्रोत कोड देख सकते हैं और पता लगा सकते हैं कि HTML तत्व प्रदान किए जाते हैं। फिर विशिष्ट सीएसएस कक्षाएं बनाएं और पूरे पैनल या पैनल में आंतरिक तत्वों को उस कक्षा में ग्रिड करें।
अधिकांश समय, यह सबसे आसान समाधान और पर्याप्त था।
सीएसएस के साथ की कोशिश करो और p:panelGrid columnClasses विशेषता:
.centered { text-align: center; }
आप अपने p:panelGrid केवल पाठ के अलावा अन्य कॉलम में घटक है, तो जोड़ें:
<p:panelGrid columnClasses="centered"> ... </p:panelGrid> फिर अपने स्टाइलशीट में एक वर्ग की तरह बनाने के आपके सीएसएस वर्ग में मार्जिन विशेषता:
.centered { text-align: center; margin-left: 50%; }
आप एक primefaces की सामग्री के सेट करना चाहते हैं: यदि आप इस कोशिश कर सकते हैं केंद्र के लिए panelGrid:
<h:panelGrid column="1">
<h:panelGroup style="display:block; text-align:center">
your contents...
</h:panelGroup>
</h:panelGrid>
इस एक एक आकर्षण की तरह मेरे लिए काम किया है, तो आप amir धन्यवाद। –