केन्द्रित: CSS-लेआउट

पृष्ठ को लेआउट एक केन्द्रित CSS-तरिका बनाउन आवश्यक अक्सर हुँदा: उदाहरणका लागि, मुख्य एकाइ केन्द्र। त्यहाँ ढिलो होस् वा पछि कुनै पनि बदलनेवाला प्रयोग गर्न पाउनेछन् प्रत्येक जो यस समस्याको धेरै समाधान छन्।

केन्द्र पाठ पङ्क्तिबद्ध

अक्सर सजावटी उद्देश्यका लागि कर को समय कम गर्न, यो मामला मा केन्द्रित पाठ, CSS सेट गर्न चाहनुहुन्छ। पहिले यो HTML-विशेषताहरु प्रयोग गरेको थियो, तर अब मानक शैली पाना संग पाठ पंक्तिबद्ध आवश्यक छ। जसको लागि तपाईं एक लाइन बनाइएको छ बीचमा पाठ को CSS पङ्क्तिबद्ध मा बाह्य गद्दी परिवर्तन गर्न चाहेको ब्लक गर्न विपरीत:

• पाठ-align: center;

यो सम्पत्ति जन्मजात र सबै छोराछोरीलाई अभिभावक बाट पारित गरिएको छ। यो मात्र होइन पाठ तर पनि अन्य तत्व असर गर्छ। यो उद्देश्य लागि, तिनीहरूले सानोवर्ण गर्नुपर्छ (जस्तै, span) वा पङ्क्ति-ब्लक (प्रदर्शन सम्पत्ति निर्दिष्ट कुनै पनि ब्लक: ब्लक)। उत्तरार्द्ध विकल्प पनि चौडाई र तत्व को उचाइ, को इन्डेन्टेसन को लचिलो कन्फिगरेसन थप परिवर्तन गर्न अनुमति दिन्छ।

पृष्ठ अक्सर ट्याग आफैले विशेषता align। यो तुरुन्तै W3C पङ्क्तिबद्ध विशेषता अप्रचलित स्वीकार देखि, कोड अमान्य बनाउँछ। एक पृष्ठमा प्रयोग सिफारिस गरिएको छैन।

केन्द्रित ब्लक

बाह्य गद्दी मार्जिन को प्रयोग: तपाईं मध्य मा div को पङ्क्तिबद्ध सेट गर्न चाहनुहुन्छ भने, CSS एकदम सहज बाटो प्रस्ताव गर्न सक्नुहुन्छ। Padding ब्लक तत्व, र रेखा-ब्लक रूपमा निर्दिष्ट गर्न सकिन्छ। Svoysva मूल्य 0 (ठाडो गद्दी), र स्वत: (तेर्सो स्वचालित इन्डेन्टेसन) हुनुपर्छ:

• मार्जिन: 0 स्वतः;

अब यो विकल्प बिल्कुल मान्य रूपमा मान्यता छ। CSS-मार्जिन सम्पत्ति पृष्ठमा स्थिति तत्व सम्बन्धित धेरै समस्या हामीलाई समाधान गर्न अनुमति दिन्छ: बाह्य गद्दी प्रयोग पनि केन्द्र को पङ्क्तिबद्ध सेट गर्न अनुमति दिन्छ।

ब्लक को बायाँ वा दायाँ छेउको पङ्क्तिबद्ध

कहिलेकाहीं CSS-तरिका केन्द्र को पङ्क्तिबद्ध आवश्यकता छैन, तर यो अर्को दुई ब्लक, एक बायाँ तर्फ बाट र अन्य राख्न आवश्यक छ - सही देखि। यो लागि त्यहाँ फ्लोट सम्पत्ति, जो तीन एक मान लिन सक्छ:, सही वा कुनै पनि बाँकी। तपाईँलाई छेउमा पक्ष राखिएको पर्छ भनेर दुई ब्लक छ भन्न गरौं। निम्नानुसार त्यसपछि कोड छ:

• .left {फ्लोट: बायाँ;}
• राइट {फ्लोट: दायाँ}

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

• .left {फ्लोट: बायाँ;}
• राइट {फ्लोट: दायाँ}
• फुटर {स्पष्ट: दुवै}

कुल प्रवाह बाहिर बायाँ र दायाँ गिरावट को कक्षाहरू संग ब्लक, त्यो छ, अन्य सबै तत्व पङ्क्तिबद्ध तत्व को धेरै अस्तित्व बेवास्ता भन्ने तथ्यलाई। सम्पत्ति स्पष्ट: दुवै अनुमति दिन्छ फुटर ब्लक वा अन्य कुनै पनि देखिने प्रवाह कक्षहरू देखि precipitated र बायाँ र दायाँ दुवै मा र्याप (फ्लोट) निषेधित। तसर्थ, हाम्रो उदाहरणमा, फुटर तलतिर विस्थापित भएको छ।

ठाडो पङ्क्तिबद्ध

त्यहाँ CSS-तरिका को केन्द्र को पङ्क्तिबद्ध सेट गर्न पर्याप्त छैन जहाँ अवस्थामा छन्, तपाईं पनि बच्चा ब्लक को ठाडो स्थिति परिवर्तन गर्नुपर्छ। कुनै पनि लाइन वा पङ्क्ति-ब्लक तत्व, माथिल्लो वा तल्लो किनारा विरुद्ध थिचिएको गर्न सकिन्छ अभिभावक तत्व को बीचमा स्थित वा मनपरी स्थानमा हुन। सबैभन्दा अक्सर ब्लक को केन्द्र को पङ्क्तिबद्ध आवश्यक, यो ठाडो-पङ्क्तिबद्ध विशेषता प्रयोग गर्दछ। त्यहाँ अन्य भित्र नीडिंत दुई ब्लक, एक हो मानौं। पङ्क्ति-ब्लक तत्व (: इनलाइन ब्लक प्रदर्शन) - यस इन्डोर एकाइ मा। यो ठाडो ब्लक बच्चा पंक्तिबद्ध आवश्यक छ:

• माथिल्लो सीमा को पङ्क्तिबद्ध - .child {ठाडो-align: शीर्ष};
• केन्द्रित - .child {ठाडो-align: मध्य};
• तल छेउको पङ्क्तिबद्ध - .child {ठाडो-align: तल};

ब्लक तत्व अडियो पाठ वा ठाडो-पङ्क्तिबद्ध लागू हुँदैन।

पङ्क्तिबद्ध एकाइहरु सम्भव समस्या

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

• .दोश्रो {फ्लोट: बायाँ}
• .तेश्रो {फ्लोट: दायाँ}
• .clearfix {उचाई: 0; स्पष्ट: दुवै;}

छद्म अक्सर प्रयोग: पछि, जो पनि psevdorasporki सिर्जना गरेर ब्लक ठाउँ मा फिर्ता गर्न अनुमति दिन्छ (उदाहरण वर्ग संग div मा मा कन्टेनर भित्र निहित र .पहिले .left र राइट comprises):

• .left {फ्लोट: बायाँ}
• राइट {फ्लोट: दायाँ}
• .कंटेनर: {सामग्री पछि: ''; प्रदर्शन: तालिका; स्पष्ट: दुवै;}

माथिको विकल्पहरू - सबै भन्दा साधारण, हुनत केही भेरिएसनहरूमा छन्। तपाईं सधैं प्रयोग गरेर psevdorasporki सिर्जना गर्न सजिलो र सबै भन्दा सुविधाजनक तरिका पाउन सक्नुहुन्छ।

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

एउटा सानो को साइटमा सामान्य लेआउट र लेआउट, र पसलहरूमा मा सामान को स्थान, र फोटो: ब्लक aligning तपाईं सुन्दर र कार्यात्मक पृष्ठ सिर्जना गर्न अनुमति दिन्छ।