केंद्रित: सीएसएस लेआउट

जब पेज के लेआउट अक्सर एक केंद्रित सीएसएस-रास्ता बनाने के लिए आवश्यक है: उदाहरण के लिए, मुख्य इकाई केंद्र के लिए। इस समस्या के कई समाधान, जिनमें से प्रत्येक अभी या बाद में किसी भी सांकेतिक शब्दों में बदलनेवाला का उपयोग करना होगा रहे हैं।

केंद्र के लिए पाठ संरेखित करें

अक्सर सजावटी प्रयोजनों के लिए आप इस मामले में पाठ केंद्रित, सीएसएस स्थापित करने के लिए, लागू करने के समय को कम करना चाहते हैं। इससे पहले इस HTML-विशेषताओं का उपयोग किया गया था, लेकिन अब मानक शैली पत्रक के साथ पाठ संरेखित करने के लिए की आवश्यकता है। ब्लॉक है जिसके लिए आप बीच एक लाइन के साथ किया जाता में पाठ का सीएसएस संरेखण में बाहरी गद्दी को बदलना चाहते हैं के विपरीत:

• text-align: केंद्र;

यह गुण विरासत में मिला है और माता पिता से सभी बच्चों को पारित कर दिया है। यह न केवल पाठ बल्कि अन्य तत्वों को प्रभावित करता है। इस प्रयोजन के लिए वे लोअरकेस किया जाना चाहिए (उदाहरण के लिए, अवधि) या पंक्ति-ब्लॉक (किसी भी ब्लॉक कि प्रदर्शन संपत्ति निर्दिष्ट करें: ब्लॉक)। दूसरा विकल्प भी आप चौड़ाई और तत्व की ऊंचाई, खरोज की और अधिक लचीला विन्यास को बदलने के लिए अनुमति देता है।

पृष्ठों अक्सर टैग खुद के लिए विशेषता संरेखित करें। यह तुरंत कोड अमान्य बनाता है, क्योंकि W3C स्वीकार संरेखित विशेषता अप्रचलित। एक पृष्ठ पर उपयोग करने की सलाह नहीं है।

केंद्रित ब्लॉक

बाहरी गद्दी मार्जिन के उपयोग: आप बीच में div के संरेखण सेट करना चाहते हैं, सीएसएस काफी आरामदायक रास्ता दे सकते हैं। पैडिंग ब्लॉक तत्वों, और लाइन-ब्लॉक के रूप में निर्दिष्ट किया जा सकता। Svoysva मान 0 (ऊर्ध्वाधर गद्दी), और ऑटो (क्षैतिज स्वत: खरोज) होना चाहिए:

• मार्जिन: 0 ऑटो;

अब इस विकल्प को पूरी तरह से वैध माना जाता है। सीएसएस मार्जिन संपत्ति हमें पृष्ठ पर स्थान-तत्व से संबंधित कई समस्याओं को हल करने की अनुमति देता है: बाहरी गद्दी का इस्तेमाल करके आप केंद्र के संरेखण निर्धारित करने की अनुमति देता है।

ब्लॉक के बाएं या दाएं किनारे का संरेखण

कभी कभी सीएसएस तरह से केंद्र के संरेखण की आवश्यकता नहीं है, लेकिन यह अगले दो ब्लॉक, बाईं ओर से एक और अन्य डाल करने के लिए आवश्यक है - सही से। इस के लिए वहाँ नाव संपत्ति है, जो तीन में से एक मान ले सकता है:, बाएं, दाएं या बिल्कुल भी नहीं। मान लीजिए कि आप दो ब्लॉकों कि कंधे से कंधा मिलाकर रखा जाना चाहिए करते हैं। फिर कोड इस प्रकार है:

• .left {फ्लोट: छोड़ दिया;}
• .right {फ्लोट: सही}

अगर वहाँ एक तिहाई ब्लॉक, जो पहले दो ब्लॉक (जैसे, पाद लेख) के तहत स्थित होना चाहिए है, तो यह स्पष्ट सुविधा रजिस्टर करने के लिए आवश्यक है:

• .left {फ्लोट: छोड़ दिया;}
• .right {फ्लोट: सही}
• पाद लेख {clear: both}

तथ्य यह है कि कुल प्रवाह से बाहर छोड़ दिया और सही गिरने की कक्षाओं के साथ ब्लॉक, जो है, अन्य सभी तत्वों गठबंधन तत्वों के अस्तित्व को नजरअंदाज कर दिया। संपत्ति clear: both पाद ब्लॉक या किसी अन्य दिखाई प्रवाह कोशिकाओं से उपजी अनुमति देता है और दोनों को छोड़ दिया और सही पर चादर (नाव) पर प्रतिबंध लगाता है। इसलिए, हमारे उदाहरण में, पाद नीचे विस्थापित किया गया है।

लंबवत संरेखण

ऐसे मामले सीएसएस-तरीकों के केंद्र के संरेखण निर्धारित करने के लिए पर्याप्त नहीं हैं, तो आप भी बच्चे को ब्लॉक के ऊर्ध्वाधर स्थिति को बदलना होगा। किसी भी लाइन या पंक्ति-ब्लॉक तत्व ऊपरी या निचली किनारे के खिलाफ लगाए जा सकती है, माता पिता के तत्व के बीच में स्थित या एक मनमाना स्थान में हो। ब्लॉक के केंद्र के संरेखण की आवश्यकता होती है अक्सर, यह ऊर्ध्वाधर- align विशेषता का उपयोग करता। मान लीजिए दो ब्लॉकों, एक दूसरे के भीतर नेस्ट देखते हैं। पंक्ति-ब्लॉक तत्व (: इनलाइन-ब्लॉक प्रदर्शन) - इस इंडोर यूनिट में। यह खड़ी ब्लॉक बच्चे संरेखित करने के लिए आवश्यक है:

• ऊपरी सीमा के संरेखण - .child {ऊर्ध्वाधर- align: शीर्ष};
• केंद्रित - .child {ऊर्ध्वाधर- align: मध्यम};
• निचले किनारे के संरेखण - .child {ऊर्ध्वाधर- align: नीचे};

ब्लॉक तत्वों पर ऑडियो पाठ के अनुरूप, या ऊर्ध्वाधर- align लागू नहीं होता।

संरेखित किया इकाइयों के साथ संभावित समस्याओं

कभी कभी div सीएसएस तरह के केंद्र संरेखित एक छोटे से परेशानी पैदा कर सकता है। उदाहरण के लिए, जब एक नाव का उपयोग कर: प्रथम, .second और .third: उदाहरण के लिए, तीन ब्लॉक हैं। दूसरे और तीसरे ब्लॉक में पहली बार झूठ बोलते हैं। एक वर्ग के साथ एक तत्व दूसरे बाईं ओर संरेखित, और अंतिम ब्लॉक - सही पर। संरेखित करने के बाद दो धारा से हटा दिया गया। पेरेंट तत्व ऊंचाई परिभाषित नहीं है, तो (जैसे, 30em), यह सहायक इकाइयों की ऊंचाई फैलाने के लिए बंद हो जाएगा। एक विशेष इकाई है, जो .second और .third देखता है - इस त्रुटि से बचने के लिए, "स्पेसर" का उपयोग करें। सीएसएस-कोड:

• .second {फ्लोट: छोड़ दिया}
• .third {फ्लोट: सही}
• .clearfix {ऊंचाई: 0; clear: both;}

छद्म अक्सर इस्तेमाल किया: के बाद, जो भी psevdorasporki बनाने के द्वारा जगह में ब्लॉक वापस जाने के लिए अनुमति देता है (वर्ग के साथ div में उदाहरण में कंटेनर के अंदर स्थित है और सबसे पहले .left और .right शामिल हैं):

• .left {फ्लोट: छोड़ दिया}
• .right {फ्लोट: सही}
• .container: {सामग्री के बाद: ''; प्रदर्शन: तालिका; clear: both;}

ऊपर दिए गए विकल्पों - सबसे आम, यद्यपि वहाँ कुछ भिन्नताएं हैं। तुम हमेशा प्रयोगों द्वारा psevdorasporki बनाने के लिए सबसे आसान और सबसे सुविधाजनक तरीका मिल सकता है।

एक अन्य समस्या अक्सर लेआउट का सामना करना पड़ा - लाइन-ब्लॉक तत्वों के संरेखण। उनमें से प्रत्येक के बाद एक जगह स्वचालित रूप से जोड़ा जाता है। संभाल यह मार्जिन संपत्ति है, जो नकारात्मक खरोज द्वारा परिभाषित किया गया है में मदद करता है। अन्य तरीके, जो कम बार उपयोग किया जाता है उदाहरण के लिए, रीसेट कर रहे हैं फ़ॉन्ट आकार। इस मामले में, माता पिता के तत्व के गुणों को पंजीकृत करता font-size: 0। अगर पाठ के ब्लॉक के भीतर स्थित, लाइन-ब्लॉक तत्वों के गुण वांछित फ़ॉन्ट आकार को लौट गए हैं। उदाहरण के लिए, font-size: 1em। विधि हमेशा सुविधाजनक नहीं है, तो यह और अधिक सामान्यतः बाहरी मार्जिन के साथ संस्करण का उपयोग किया जाता है।

एक छोटा सा की साइट पर सामान्य लेआउट और लेआउट, और दुकानों में माल का स्थान, और तस्वीरें: ब्लॉक संरेखित आप सुंदर और कार्यात्मक पेज बनाने के लिए अनुमति देता है।