आज, प्रिय वाचक, आम्ही ब्लॉकमध्ये उभ्या संरेखनाच्या समस्येचा सामना करू div.

बहुधा तुम्हाला एक अद्भुत CSS मालमत्तेच्या अस्तित्वाबद्दल आधीच माहिती असेल अनुलंब-संरेखित करा.आणि देवानेच आम्हाला हे गुणधर्म उभ्या संरेखनासाठी तंतोतंत वापरण्याचा आदेश दिला आहे (त्याला असे स्व-स्पष्टीकरणात्मक नाव आहे असे काही नाही).

समस्येचे सूत्रीकरण:तुम्हाला उभ्याशी संबंधित व्हेरिएबल उंची ब्लॉकची सामग्री मध्यभागी ठेवण्याची आवश्यकता आहे.

आता समस्या सोडवण्यास सुरुवात करूया.

आणि म्हणून, आमच्याकडे एक ब्लॉक आहे, त्याची उंची बदलू शकते:

मनात येणारी पहिली गोष्ट म्हणजे खालील कृती करणे:

या वाक्यांशावर विश्वास ठेवण्याचे प्रत्येक कारण आहे सामग्री अवरोधित करा div कंटेनरच्या मध्यभागी उंचीवर संरेखित केले जाईल.

पण ते तिथे नव्हते! आम्ही अशा प्रकारे कोणतेही अपेक्षित केंद्र संरेखन साध्य करणार नाही. आणि का? असे दिसते की सर्वकाही योग्यरित्या सूचित केले आहे. हे घासणे आहे की बाहेर वळते: मालमत्ता अनुलंब-संरेखित कराफक्त टेबल सेलची सामग्री संरेखित करण्यासाठी किंवा एकमेकांशी संबंधित इनलाइन घटक संरेखित करण्यासाठी वापरली जाऊ शकते.

टेबल सेलमधील संरेखन बद्दल, मला वाटते की सर्वकाही स्पष्ट आहे. परंतु मी इनलाइन घटकांसह आणखी एक प्रकरण स्पष्ट करेन.

इनलाइन घटकांचे अनुलंब संरेखन

समजा तुमच्याकडे मजकूराची एक ओळ आहे जी ओळ टॅगद्वारे खंडित केलेली आहे भागांमध्ये:

आपण स्वागत करते तुकडामजकूर

इनलाइन टॅग हा एक कंटेनर आहे ज्याच्या देखाव्यामुळे सामग्री नवीन ओळीत गुंडाळली जात नाही.

ब्लॉक टॅगच्या क्रियेमुळे कंटेनरची सामग्री नवीन ओळीत गुंडाळली जाते.

ब्लॉक टॅग आहे. जर आपण मजकूराचे तुकडे ब्लॉकमध्ये बंद केले

, मग त्यापैकी प्रत्येक नवीन ओळीवर असेल. टॅग वापरणे , जे, विपरीत

, लोअरकेस आहे, कंटेनर नवीन ओळीवर हलविले जाणार नाहीत, सर्व कंटेनर त्याच ओळीवर राहील.

कंटेनर विशेष फॉरमॅटिंगसह मजकूराचा भाग निर्दिष्ट करताना वापरण्यास सोयीस्कर (त्याला रंग, भिन्न फॉन्ट इ.) सह हायलाइट करणे.

कंटेनरसाठी खालील CSS गुणधर्म लागू करा:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

मजकूराची परिणामी ओळ यासारखी दिसेल:

हे इनलाइन घटकांचे अनुलंब संरेखन आणि CSS गुणधर्मापेक्षा अधिक काही नाही अनुलंब-संरेखित कराया कार्याचा उत्तम प्रकारे सामना करते.

आम्ही थोडे विचलित झालो, आता आम्ही आमच्या मुख्य कार्याकडे परतलो.

div कंटेनरमध्ये अनुलंब संरेखन

काहीही असो, div कंटेनरमधील संरेखनासाठी आम्ही गुणधर्म वापरू अनुलंब-संरेखित करा. मी आधीच म्हटल्याप्रमाणे, हा गुणधर्म इनलाइन घटक संरेखित करण्याच्या बाबतीत वापरला जाऊ शकतो (आम्ही या प्रकरणाची वर तपशीलवार चर्चा केली आहे आणि ते div कंटेनरमध्ये संरेखनासाठी आमच्यासाठी योग्य नाही); फक्त ते वापरणे बाकी आहे अनुलंब-संरेखित कराटेबल सेलसाठी कार्य करते.

आपण हे कसे वापरू शकतो? आमच्याकडे टेबल नाही, आम्ही डिव्ह कंटेनरसह काम करतो.

हा, हे अगदी सोपे आहे.

CSS मालमत्ता प्रदर्शनआपल्याला आमच्या div ब्लॉकला टेबल सेलमध्ये बदलण्याची परवानगी देते, हे सहज आणि नैसर्गिकरित्या केले जाऊ शकते:

समजा आपल्याकडे वर्ग div आहे मजकूर संरेखित:

या ब्लॉकसाठी आम्ही खालील CSS गुणधर्म निर्दिष्ट करतो:

मजकूर संरेखित (प्रदर्शन: टेबल-सेल;)

ही CSS सूचना चमत्कारिकरित्या आमच्या div ला कोणत्याही प्रकारे दृश्यमानपणे न बदलता टेबल सेलमध्ये बदलेल. आणि टेबल सेलसाठी आम्ही प्रॉपर्टी लागू करू शकतो अनुलंब-संरेखित करापूर्णपणे आणि इच्छित अनुलंब संरेखन कार्य करेल.

तथापि, सर्वकाही इतके सहज संपू शकत नाही. आमच्याकडे एक अद्भुत IE ब्राउझर आहे. त्याला मालमत्तेसह कसे काम करावे हे माहित नाही डिस्प्ले: टेबल-सेल(मी तुम्हाला htmlbook.ru वेबसाइटवर वेगवेगळ्या ब्राउझरमध्ये या CSS मालमत्तेची कार्यक्षमता स्पष्ट करणारा तक्ता वाचा असे सुचवितो). म्हणून, आपल्याला विविध युक्त्या वापराव्या लागतील.

सर्व ब्राउझरसाठी div कंटेनरमध्ये संरेखन साध्य करण्याचे अनेक मार्ग आहेत:

• अतिरिक्त सहायक div कंटेनर वापरण्याची पद्धत
• अभिव्यक्ती वापरण्याची पद्धत. हे ब्लॉक हाइट्सच्या अवघड गणनेसह जोडलेले आहे. जावास्क्रिप्टच्या ज्ञानाशिवाय तुम्ही हे करू शकत नाही.
• लाइन-उंची गुणधर्म वापरणे. ही पद्धत केवळ ज्ञात उंचीच्या ब्लॉकमध्ये उभ्या संरेखनासाठी योग्य आहे, आणि म्हणून सामान्य बाबतीत लागू होत नाही.
• IE ब्राउझरच्या बाबतीत परिपूर्ण आणि संबंधित सामग्री ऑफसेट वापरणे. ही पद्धत मला सर्वात समजण्यासारखी आणि सोपी वाटते. याव्यतिरिक्त, हे व्हेरिएबल उंची div कंटेनरसाठी लागू केले जाऊ शकते. आम्ही त्यावर अधिक तपशीलवार राहू.

जसे तुम्ही समजता, आम्हाला फक्त IE मधील उभ्या संरेखनाची समस्या सोडवावी लागेल जी त्याच्या मालमत्तेच्या गैरसमजाशी संबंधित आहे. डिस्प्ले: टेबल-सेल(IE6 नाही, IE7 नाही, किंवा IE8या मालमत्तेशी परिचित नाही). म्हणून, वापरून सशर्त टिप्पणीआम्ही विशेषतः IE ब्राउझरसाठी भिन्न CSS गुणधर्म निर्दिष्ट करू.

सशर्त टिप्पणी

बांधकाम प्रकार:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

सशर्त टिप्पणी म्हणतात (सावधगिरी बाळगा, सशर्त टिप्पणीचा प्रकार एका स्पेसपर्यंत दिलेल्या उदाहरणाशी पूर्णपणे जुळला पाहिजे).

अशा सशर्त टिप्पणीमध्ये समाविष्ट असलेल्या सूचना केवळ तेव्हाच अंमलात आणल्या जातील जेव्हा या कोडचा अर्थ लावणारा ब्राउझर IE कुटुंबाचा असेल.

अशा प्रकारे, सशर्त टिप्पणी वापरून, आम्ही IE वगळता सर्व ब्राउझरमधून कोडचा तुकडा लपवू शकतो.

समस्येचे निराकरण

या सर्व अजमोदा (ओवा)मुळे, आम्हाला आमचा HTML कोड दोन अतिरिक्त कंटेनरसह प्रदान करावा लागेल. आमचा मजकूर ब्लॉक असा दिसेल:

div कंटेनर वर्गासाठी textalign CSS गुणधर्म सेट केले आहेत जे सर्व सामान्य ब्राउझरसाठी (IE वगळता, अर्थातच) त्याची सामग्री अनुलंब संरेखित करतात:

डिस्प्ले: टेबल-सेल; vertical-align: मध्यम;

आणि आणखी दोन गुणधर्म जे ब्लॉकची रुंदी आणि उंची सेट करतात:

रुंदी: 500px; उंची: 500px;

हे सर्व ब्राउझरमध्ये, उभ्या सापेक्ष मध्यभागी असलेल्या कंटेनरची सामग्री संरेखित करण्यासाठी पुरेसे आहे IE वगळता.

आता आपण संरेखनाशी संबंधित गुणधर्म जोडण्यास सुरवात करतो IE कुटुंबाच्या ब्राउझरसाठी(त्यांच्यासाठी आम्ही अतिरिक्त ब्लॉक्स वापरले divआणि कालावधी):

टॅगचा संदर्भ देत divवर्ग ब्लॉकच्या आत textalign. हे करण्यासाठी, आपण प्रथम वर्गाचे नाव सूचित करणे आवश्यक आहे, आणि नंतर, स्पेसद्वारे विभक्त केलेले, आपण ज्या टॅगमध्ये प्रवेश करत आहोत.

मजकूर div (स्थिती: परिपूर्ण; शीर्ष: 50%;)

या डिझाइनचा अर्थ आहे: वर्गासह ब्लॉकमधील सर्व div टॅगसाठी textalignसूचीबद्ध गुणधर्म लागू करा.

त्यानुसार, ब्लॉकसाठी निर्दिष्ट शैली textalignसुधारित केले आहेत:

मजकूर संरेखित (प्रदर्शन: टेबल-सेल; अनुलंब-संरेखित: मध्य; रुंदी: 500px; उंची: 500px; स्थिती: सापेक्ष;)

आता मजकूर ब्लॉकचा वरचा डावा बिंदू 50% ने खाली हलविला आहे.

काय घडत आहे हे स्पष्ट करण्यासाठी, मी एक चित्र काढले:

आपण चित्रावरून पाहू शकता की, आम्ही काही प्रगती केली आहे. पण ते सर्व नाही! पिवळ्या ब्लॉकचा वरचा डावा बिंदू मूळ (जांभळा) ब्लॉकच्या तुलनेत 50% खाली सरकला आहे. परंतु आम्हाला ते जांभळ्या ब्लॉकच्या उंचीच्या पन्नास टक्के असणे आवश्यक आहे. पिवळ्या ब्लॉकच्या मध्यभागी, त्याचा वरचा डावा बिंदू नाही.

आता टॅग लागू होईल कालावधीआणि त्याची सापेक्ष स्थिती:

मजकूर विस्तारित कालावधी (स्थिती: सापेक्ष; शीर्ष: -50%;)

अशा प्रकारे, आम्ही पिवळा ब्लॉक त्याच्या सुरुवातीच्या स्थितीच्या तुलनेत त्याच्या उंचीच्या 50% वर हलवला आहे. जसे आपण समजता, पिवळ्या ब्लॉकची उंची मध्यवर्ती सामग्रीच्या उंचीइतकी आहे. आणि स्पॅन कंटेनरवरील शेवटच्या ऑपरेशनने आमची सामग्री जांभळ्या ब्लॉकच्या मध्यभागी ठेवली. हुर्रे!

चला थोडी फसवणूक करूया

सर्व प्रथम, आम्हाला सर्व सामान्य ब्राउझरमधून अजमोदा (ओवा) लपविण्याची आणि IE साठी उघडण्याची आवश्यकता आहे. हे निश्चितपणे, सशर्त टिप्पणी वापरून केले जाऊ शकते;

एक छोटीशी अडचण आहे.जर केंद्रीत सामग्री खूप जास्त असेल तर यामुळे अप्रिय परिणाम होतात: उभ्या स्क्रोलसाठी अतिरिक्त उंची आहे.

समस्येचे निराकरण:मालमत्ता जोडणे आवश्यक आहे ओव्हरफ्लो: लपलेलेब्लॉक textalign.

मालमत्ता तपशीलवार जाणून घ्या ओव्हरफ्लोमध्ये शक्य आहे.

ब्लॉकसाठी अंतिम CSS सूचना textalignफॉर्म आहे:

मजकूर संरेखित (प्रदर्शन: टेबल-सेल; अनुलंब-संरेखित: मध्य; रुंदी: 500px; उंची: 500px; स्थिती: सापेक्ष; ओव्हरफ्लो: लपविलेले; सीमा: 1px घन काळा;)

माफ करा, मी एक महत्त्वाचा मुद्दा सांगायला विसरलो. प्रयत्न केला तर वर्ग ब्लॉकची उंची सेट करा textalignटक्केवारी म्हणून, तर तुमच्याकडे आहे काहीही चालणार नाही.

व्हेरिएबल उंची ब्लॉकमध्ये केंद्रीकरण

बर्याचदा क्लास ब्लॉकची उंची सेट करण्याची आवश्यकता असते textalignपिक्सेलमध्ये नाही, परंतु पॅरेंट ब्लॉकच्या उंचीच्या टक्केवारीनुसार, आणि div कंटेनरची सामग्री मध्यभागी संरेखित करा.

पकड अशी आहे की टेबल सेलसाठी हे करणे अशक्य आहे (परंतु वर्ग ब्लॉक textalignमालमत्तेबद्दल धन्यवाद, अगदी टेबल सेलमध्ये बदलते डिस्प्ले: टेबल-सेल).

या प्रकरणात, आपण बाह्य ब्लॉक वापरणे आवश्यक आहे ज्यासाठी CSS गुणधर्म निर्दिष्ट केला आहे डिस्प्ले: टेबलआणि आधीच त्यासाठी उंचीचे टक्के मूल्य सेट करा. नंतर CSS निर्देशांसह ब्लॉक नेस्ट केला डिस्प्ले: टेबल-सेल, मूळ ब्लॉकची उंची आनंदाने प्राप्त होईल.

आमच्या उदाहरणामध्ये व्हेरिएबल उंची ब्लॉक लागू करण्यासाठी, आम्ही CSS थोडे संपादित करू:

वर्गाला textalignआम्ही मालमत्ता मूल्य बदलू प्रदर्शनसह टेबल सेलवर टेबलआणि संरेखन निर्देश काढून टाका vertical-align: मध्य. आता आम्ही उंचीचे मूल्य 500 पिक्सेलवरून सुरक्षितपणे बदलू शकतो, उदाहरणार्थ, 100%.

म्हणून क्लास ब्लॉकसाठी CSS गुणधर्म textalignअसे दिसेल:

मजकूर करा

फक्त सामग्री केंद्रीकरण लागू करणे बाकी आहे. हे करण्यासाठी, वर्ग ब्लॉकमध्ये डिव्ह कंटेनर नेस्टेड केले आहे textalign(चित्रातील हाच पिवळा ब्लॉक आहे), तुम्हाला CSS गुणधर्म सेट करणे आवश्यक आहे डिस्प्ले: टेबल-सेल, नंतर ते मूळ ब्लॉकमधून 100% ची उंची प्राप्त करेल textalign(जांभळा ब्लॉक). आणि मध्यभागी असलेल्या नेस्टेड डिव्ह कंटेनरची सामग्री मालमत्तेसह संरेखित करण्यापासून आम्हाला काहीही रोखणार नाही vertical-align: मध्य.

आम्हाला कंटेनरमध्ये नेस्ट केलेल्या div ब्लॉकसाठी CSS गुणधर्मांची आणखी एक अतिरिक्त यादी मिळते textalign.

मजकूर div (प्रदर्शन: टेबल-सेल; अनुलंब-संरेखित: मध्य;)

ती संपूर्ण युक्ती आहे. इच्छित असल्यास, सामग्री केंद्रस्थानी ठेवून आपण व्हेरिएबल उंची ठेवू शकता.

व्हेरिएबल उंची ब्लॉकच्या उभ्या संरेखनाबद्दल अधिक माहितीसाठी, पहा.

CSS वापरून घटकांना अनुलंब केंद्रीत करणे हे एक कार्य आहे जे विकासकांसाठी काही अडचण प्रस्तुत करते. तथापि, ते सोडविण्याच्या अनेक पद्धती आहेत, ज्या अगदी सोप्या आहेत. हा धडा अनुलंब सामग्रीसाठी 6 पर्याय सादर करतो.

चला समस्येच्या सामान्य वर्णनासह प्रारंभ करूया.

अनुलंब केंद्रीकरण समस्या

क्षैतिज केंद्रीकरण खूप सोपे आणि सोपे आहे. जेव्हा केंद्रीत घटक इनलाइन असतो, तेव्हा आम्ही मूळ घटकाशी संबंधित संरेखन गुणधर्म वापरतो. जेव्हा घटक ब्लॉक-लेव्हल असतो, तेव्हा आम्ही त्याची रुंदी आणि डाव्या आणि उजव्या मार्जिनची स्वयंचलित सेटिंग सेट करतो.

बहुतेक लोक, मजकूर-संरेखित: गुणधर्म वापरताना, उभ्या केंद्रीकरणासाठी उभ्या-संरेखित गुणधर्माचा संदर्भ घेतात. सर्व काही अगदी तार्किक दिसते. जर तुम्ही टेबल टेम्प्लेट्स वापरल्या असतील, तर तुम्ही व्हॅलिग्न विशेषताचा मोठ्या प्रमाणात वापर केला असेल, ज्यामुळे समस्या सोडवण्यासाठी अनुलंब-संरेखित हा योग्य मार्ग आहे या विश्वासाला बळकटी मिळते.

परंतु valign विशेषता फक्त टेबल सेलवर कार्य करते. आणि उभ्या-संरेखित गुणधर्म त्याच्याशी खूप साम्य आहे. हे टेबल सेल आणि काही इनलाइन घटकांवर देखील परिणाम करते.

उभ्या-संरेखित गुणधर्माचे मूल्य मूळ इनलाइन घटकाशी संबंधित आहे.

• मजकूराच्या एका ओळीत, संरेखन रेषेच्या उंचीशी संबंधित आहे.
• टेबल सेल विशेष अल्गोरिदम (सामान्यत: पंक्तीची उंची) द्वारे गणना केलेल्या मूल्याशी संबंधित संरेखन वापरते.

परंतु दुर्दैवाने, अनुलंब-संरेखित गुणधर्म ब्लॉक-स्तरीय घटकांवर कार्य करत नाही (उदाहरणार्थ, div घटकातील परिच्छेद). या परिस्थितीमुळे असा विचार होऊ शकतो की उभ्या संरेखनाच्या समस्येवर कोणताही उपाय नाही.

परंतु ब्लॉक घटकांना केंद्रस्थानी ठेवण्यासाठी इतर पद्धती आहेत, ज्याची निवड बाह्य कंटेनरच्या संदर्भात काय केंद्रित केले जात आहे यावर अवलंबून असते.

रेषा-उंची पद्धत

जेव्हा तुम्हाला मजकूराची एक ओळ अनुलंब मध्यभागी ठेवायची असेल तेव्हा ही पद्धत कार्य करते. तुम्हाला फक्त लाइनची उंची फॉन्ट आकारापेक्षा मोठी सेट करायची आहे.

डीफॉल्टनुसार, मजकूराच्या वरच्या आणि तळाशी पांढरी जागा समान रीतीने वितरीत केली जाईल. आणि रेषा अनुलंब मध्यभागी असेल. अनेकदा रेषेची उंची घटकाच्या उंचीइतकी केली जाते.

HTML:

CSS:

#मुल (रेषा-उंची: 200px;)

ही पद्धत सर्व ब्राउझरमध्ये कार्य करते, जरी ती फक्त एका ओळीसाठी वापरली जाऊ शकते. उदाहरणातील 200 px मूल्य अनियंत्रितपणे निवडले गेले. तुम्ही मजकूराच्या फॉन्ट आकारापेक्षा मोठे कोणतेही मूल्य वापरू शकता.

रेषा-उंची वापरून प्रतिमा केंद्रीत करणे

सामग्री एक चित्र असेल तर? वरील पद्धत चालेल का? उत्तर CSS कोडच्या आणखी एका ओळीत आहे.

HTML:

CSS:

#पाल (रेषा-उंची: 200px; ) #parent img (उभ्या-संरेखित: मध्य; )

रेखा-उंची गुणधर्माचे मूल्य प्रतिमेच्या उंचीपेक्षा जास्त असणे आवश्यक आहे.

CSS टेबल पद्धत

वर उल्लेख केला होता की उभ्या-संरेखित गुणधर्माचा वापर टेबल सेलसाठी केला जातो, जेथे ते उत्कृष्ट कार्य करते. आम्ही आमच्या घटकाला टेबल सेल म्हणून प्रदर्शित करू शकतो आणि आशयाला अनुलंब मध्यभागी ठेवण्यासाठी त्यावर उभ्या-संरेखित गुणधर्माचा वापर करू शकतो.

टीप: CSS सारणी HTML सारणी सारखी नसते.

HTML:

CSS:

#पालक (डिस्प्ले: टेबल;) #बाल (प्रदर्शन: टेबल-सेल; उभ्या-संरेखित: मध्य; )

आम्ही टेबल आउटपुट पॅरेंट div घटकावर सेट करतो आणि नेस्टेड div घटक टेबल सेल म्हणून आउटपुट करतो. तुम्ही आता आतील कंटेनरवर उभ्या-संरेखित गुणधर्म वापरू शकता. त्यातील प्रत्येक गोष्ट अनुलंब मध्यभागी असेल.

वरील पद्धतीच्या विपरीत, या प्रकरणात सामग्री डायनॅमिक असू शकते कारण div घटक त्याच्या सामग्रीनुसार आकार बदलेल.

या पद्धतीचा तोटा असा आहे की ती IE च्या जुन्या आवृत्त्यांमध्ये कार्य करत नाही. नेस्टेड कंटेनरसाठी तुम्हाला डिस्प्ले: इनलाइन-ब्लॉक प्रॉपर्टी वापरावी लागेल.

परिपूर्ण स्थिती आणि ऋण मार्जिन

ही पद्धत सर्व ब्राउझरमध्ये देखील कार्य करते. परंतु त्यासाठी केंद्रस्थानी असलेल्या घटकाला उंची देणे आवश्यक आहे.

उदाहरण कोड एकाच वेळी क्षैतिज आणि अनुलंब केंद्रीकरण करतो:

HTML:

CSS:

#पालक (स्थिती: नातेवाईक;) #मुल (स्थिती: परिपूर्ण; शीर्ष: 50%; डावीकडे: 50%; उंची: 30%; रुंदी: 50%; समास: -15% 0 0 -25%; )

प्रथम, आम्ही घटक स्थिती प्रकार सेट करतो. पुढे, आम्ही नेस्टेड डिव्ह एलिमेंटचे टॉप आणि डावे गुणधर्म ५०% वर सेट करतो, जे पॅरेंट एलिमेंटच्या मध्यभागी असते. पण मध्यभागी नेस्टेड घटकाचा वरचा डावा कोपरा आहे. म्हणून, तुम्हाला ते वर (अर्धा उंची) उचलण्याची आणि डावीकडे (अर्धा रुंदी) हलवण्याची आवश्यकता आहे आणि नंतर केंद्र मूळ घटकाच्या केंद्राशी जुळेल. त्यामुळे या प्रकरणात घटकाची उंची जाणून घेणे आवश्यक आहे. मग आम्ही अनुक्रमे अर्ध्या उंची आणि रुंदीच्या बरोबरीने ऋण शीर्ष आणि डाव्या समासासह घटक सेट करतो.

ही पद्धत सर्व ब्राउझरमध्ये कार्य करत नाही.

परिपूर्ण स्थिती आणि stretching

उदाहरण कोड अनुलंब आणि क्षैतिज मध्यभागी करते.

HTML:

CSS:

#पालक (स्थिती: नातेवाईक;) #मुल (स्थिती: निरपेक्ष; शीर्ष: 0; तळ: 0; डावीकडे: 0; उजवीकडे: 0; रुंदी: 50%; उंची: 30%; समास: स्वयं; )

या पद्धतीमागील कल्पना म्हणजे नेस्टेड एलिमेंटला वरच्या, खालच्या, उजव्या आणि डावीकडील गुणधर्म 0 वर सेट करून मूळ घटकाच्या सर्व 4 सीमांवर पसरवणे.

समास सर्व बाजूंनी स्वयं-उत्पन्न करण्यासाठी सेट केल्याने सर्व 4 बाजूंना समान मूल्ये सेट होतील आणि आमचा नेस्टेड डिव्ह घटक त्याच्या मूळ घटकावर केंद्रीत केला जाईल.

दुर्दैवाने, ही पद्धत IE7 आणि त्याखालील मध्ये कार्य करत नाही.

वर आणि खाली समान जागा

या पद्धतीमध्ये, समान पॅडिंग स्पष्टपणे मूळ घटकाच्या वर आणि खाली सेट केले आहे.

HTML:

CSS:

#पालक (पॅडिंग: 5% 0;) #मुल (पॅडिंग: 10% 0;)

उदाहरण CSS कोड दोन्ही घटकांसाठी शीर्ष आणि तळ पॅडिंग सेट करते. नेस्टेड घटकासाठी, पॅडिंग सेट केल्याने ते अनुलंब मध्यभागी येईल. आणि पॅरेंट एलिमेंटचे पॅडिंग त्यामध्ये नेस्टेड एलिमेंटला मध्यभागी ठेवेल.

घटकांचा आकार बदलण्यासाठी मापनाची सापेक्ष एकके वापरली जातात. आणि मोजमापाच्या परिपूर्ण एककांसाठी तुम्हाला गणना करावी लागेल.

उदाहरणार्थ, जर मूळ घटकाची उंची 400px असेल आणि नेस्टेड घटक 100px असेल, तर वर आणि तळाशी 150px पॅडिंग आवश्यक आहे.

150 + 150 + 100 = 400

% वापरल्याने तुम्हाला गणना ब्राउझरवर सोडता येते.

ही पद्धत सर्वत्र कार्य करते. नकारात्मक बाजू म्हणजे गणनाची आवश्यकता आहे.

टीप:ही पद्धत घटकाचे बाह्य पॅडिंग सेट करून कार्य करते. तुम्ही घटकामध्ये मार्जिन देखील वापरू शकता. मार्जिन किंवा पॅडिंग वापरण्याचा निर्णय प्रकल्पाच्या वैशिष्ट्यांवर अवलंबून असणे आवश्यक आहे.

फ्लोटिंग div

ही पद्धत रिक्त div घटक वापरते जी तरंगते आणि दस्तऐवजातील आमच्या नेस्टेड घटकाची स्थिती नियंत्रित करण्यात मदत करते. लक्षात घ्या की फ्लोटिंग div HTML कोडमध्ये आमच्या नेस्टेड घटकापुढे ठेवला आहे.

HTML:

CSS:

#पालक (उंची: 250px;) #floater ( फ्लोट: डावीकडे; उंची: 50%; रुंदी: 100%; समास-तळाशी: -50px; ) #मुल (स्पष्ट: दोन्ही; उंची: 100px; )

आम्ही रिक्त div डावीकडे किंवा उजवीकडे ऑफसेट करतो आणि त्याची उंची त्याच्या मूळ घटकाच्या 50% वर सेट करतो. अशा प्रकारे ते मूळ घटकाचा वरचा अर्धा भाग भरेल.

हा div फ्लोटिंग असल्याने, तो दस्तऐवजाच्या सामान्य प्रवाहातून काढून टाकला जातो आणि आम्हाला नेस्टेड घटकावरील मजकूर उघडणे आवश्यक आहे. उदाहरण स्पष्ट: दोन्ही वापरते, परंतु फ्लोटिंग रिक्त div घटकाच्या ऑफसेट प्रमाणेच दिशा वापरणे पुरेसे आहे.

नेस्टेड div घटकाची शीर्ष सीमा रिक्त div घटकाच्या खालच्या सीमेच्या खाली असते. आपल्याला नेस्टेड एलिमेंटला फ्लोटिंग एम्प्टी एलिमेंटच्या अर्ध्या उंचीने वर नेले पाहिजे. समस्येचे निराकरण करण्यासाठी, फ्लोटिंग रिक्त डिव्ह घटकासाठी नकारात्मक मार्जिन-तळाशी गुणधर्म मूल्य वापरा.

ही पद्धत सर्व ब्राउझरमध्ये देखील कार्य करते. तथापि, ते वापरण्यासाठी अतिरिक्त रिक्त div घटक आणि नेस्टेड घटकाच्या उंचीचे ज्ञान आवश्यक आहे.

निष्कर्ष

वर्णन केलेल्या सर्व पद्धती वापरण्यास सोप्या आहेत. अडचण अशी आहे की त्यापैकी एकही सर्व प्रकरणांसाठी योग्य नाही. तुम्हाला प्रकल्पाचे विश्लेषण करणे आवश्यक आहे आणि आवश्यकतेनुसार सर्वात योग्य एक निवडा.

CSS मधील घटकांच्या अनुलंब केंद्रीकरणाच्या समस्येमध्ये अनेक तयार उपाय आहेत. प्रत्येक वैयक्तिक प्रकरणात संरेखन पद्धतीची निवड प्रकार, आकार, घटकांचे स्थान आणि त्यांच्यासाठी निर्दिष्ट केलेल्या इतर गुणधर्मांवर अवलंबून असते.

खाली लेआउट डिझाइनर्समध्ये काही लोकप्रिय उभ्या संरेखन तंत्र आहेत. ते कसे कार्य करतात आणि त्यापैकी प्रत्येक कोणत्या बाबतीत सर्वात योग्य आहे हे दर्शविते.

येथे दोन div घटक आहेत:

प्रत्येक पद्धत इनडोअर युनिटला बाहेरच्या युनिटच्या मध्यभागी संरेखित करण्यासाठी वापरली जाईल.

एका ओळीसाठी रेषा-उंची

जेव्हा पालक मजकूराची एक ओळ व्यापतात आणि मुलाची उंची ओळखली जाते, तेव्हा ओळ-उंची गुणधर्म लागू केला जाऊ शकतो. मालमत्तेचे मूल्य बाह्य ब्लॉकच्या उंचीइतके असणे आवश्यक आहे. हे फक्त एका ओळीसाठी कार्य करते, म्हणून ओव्हरफ्लो जोडणे उपयुक्त आहे: लपविलेले आणि पांढरे-स्पेस: नावरॅप मुलाला.

टक्केवारी नोटेशन लाइन-उंची = 100% वापरणे शक्य होणार नाही, कारण या प्रकरणात 100% ही फॉन्टची उंची आहे.

कंटेनर (
उंची: 300px;
रेखा-उंची: 300px;
}

आतील(
white-space: nowrap;
ओव्हरफ्लो: लपलेले;
}

जर बाह्य ब्लॉकची उंची माहित असेल तरच पद्धत लागू होईल.

उभ्या-संरेखित असलेली सारणी

घटकांच्या उभ्या संरेखनासाठी टेबल आदर्श आहे. शब्दार्थांचे उल्लंघन न करण्यासाठी, CSS वापरून टेबल घटक तयार करणे चांगले आहे. सेलच्या सामग्रीची स्थिती अनुलंब-संरेखित करून नियंत्रित केली जाते. टेबलमध्ये या मालमत्तेसाठी चार मूल्ये आहेत:

बेसलाइन - डीफॉल्ट;
. तळाशी - सेलच्या तळाशी असलेली सामग्री;
. मध्य - सेलच्या मध्यभागी असलेली सामग्री;
. शीर्ष — सेलच्या शीर्षस्थानी सामग्री.

पहिल्या उदाहरणात, एकल टेबल सेल बाह्य ब्लॉक बनतो.

कंटेनर (
डिस्प्ले: टेबल-सेल;
vertical-align: मध्यम;
}

या पद्धतीची चांगली गोष्ट अशी आहे की ती दिलेल्या उंचीशिवाय घटकांसाठी कार्य करते, परंतु काही प्रकरणांमध्ये त्याचा वापर या वस्तुस्थितीमुळे बाधित होतो की बाह्य ब्लॉक, कोणत्याही टेबल सेलप्रमाणे, त्याची रुंदी त्याच्या सामग्रीनुसार समायोजित करते आणि आपण ते ताणू शकता. केवळ रुंदीसाठी रुंदी स्पष्टपणे सेट करून. टेबल नसलेल्या सेलसाठी, टक्केवारी पुरेसे कार्य करत नाही.

डिस्प्ले:टेबल प्रॉपर्टीसह सेल त्याच्या पॅरेंटमध्ये गुंडाळून ही कमतरता सुधारली जाते. या घटकाचा आकार टक्केवारी म्हणून सेट केला जाऊ शकतो. अंतिम कोड असे दिसेल:

बाहेरील आवरण (
प्रदर्शन: टेबल;
}

कंटेनर (
डिस्प्ले: टेबल-सेल;
vertical-align: मध्यम;
}

स्थिती: परिपूर्ण + ऋण मार्जिन

जेव्हा अंतर्गत घटकाची उंची ओळखली जाते तेव्हा पद्धत वापरली जाते. हे बाह्य युनिटला अज्ञात असू शकते. पालकांना सापेक्ष स्थान दिले जाते आणि त्यामधील मुलाला परिपूर्ण स्थान दिले जाते.

50% च्या टॉप प्रॉपर्टी व्हॅल्यूमुळे नेस्टेड घटक बाह्य ब्लॉकच्या मध्यभागी त्याच्या वरच्या काठासह स्थित केला जातो. फक्त उरलेले आहे की त्याचे ऋण मार्जिन-टॉप त्याच्या स्वतःच्या उंचीने अर्ध्याने वाढवणे जेणेकरून ते उभ्या मध्यभागी उभे राहते.

कंटेनर (
स्थिती: नातेवाईक;
}

आतील(
उंची: 140px;
स्थिती: निरपेक्ष;
शीर्ष: 50%;
मार्जिन-टॉप: -70px;
}

या पद्धतीचा तोटा म्हणजे मुलाची उंची जाणून घेणे आवश्यक आहे.

उभ्या-संरेखित रेषेत संरेखन

इनलाइन आणि इनलाइन-ब्लॉक घटकांचे संरेखन, प्रतिमा आणि चिन्हांसह, आसपासच्या मजकुरात अनुलंब-संरेखित गुणधर्माने पूर्ण केले जाते. सारणीच्या विपरीत, या प्रकरणात तपशीलामध्ये निर्दिष्ट केलेल्या मूल्यांचा संपूर्ण संच कार्य करतो.

जर पालकांची उंची ज्ञात असेल, तर ही मालमत्ता बहुरेखा मजकूर मध्यभागी ठेवण्यासाठी वापरली जाऊ शकते.

बाह्य ब्लॉकसाठी, एका ओळीचे मध्यभागी विहित केलेले आहे.

कंटेनर (
उंची: 140px;
लाइन-उंची: 140px;
}

आतील ब्लॉकसाठी रेषा-उंची मूल्य सामान्य किंवा कोणत्याही इच्छित मूल्यावर पुन्हा परिभाषित केले आहे. त्यास अनुलंब-संरेखित संरेखन देखील दिलेले आहे: मध्य आणि इनलाइन-ब्लॉक प्रकारात रूपांतर - प्रदर्शन: इनलाइन-ब्लॉक.

आतील(
प्रदर्शन: इनलाइन-ब्लॉक;
रेषा-उंची: सामान्य;
vertical-align: मध्यम;
}

या पद्धतीचा तोटा असा आहे की आपल्याला पालकांची उंची माहित असणे आवश्यक आहे.

ट्रान्सफॉर्मसह संरेखन

ट्रान्सफॉर्म प्रॉपर्टीचे translateY फंक्शन तुम्हाला अज्ञात उंचीच्या आतील ब्लॉकला मध्यभागी ठेवण्याची परवानगी देते. हे करण्यासाठी, पालक तुलनेने आणि मूल पूर्णपणे स्थित असणे आवश्यक आहे.

50% मूल्य असलेली शीर्ष मालमत्ता आतील ब्लॉक कमी करते जेणेकरून त्याची वरची धार त्याच्या पालकांच्या मध्यभागी स्थित असेल. translateY मूल्य: -50% घटकाला त्याच्या स्वतःच्या उंचीच्या अर्ध्यापर्यंत वाढवते आणि त्याद्वारे ब्लॉक्सच्या उभ्या केंद्रांना संरेखित करते.

कंटेनर (
स्थिती: नातेवाईक;
}

आतील(
स्थिती: निरपेक्ष;
शीर्ष: 50%;
रूपांतर: translateY(-50%);
}

या तंत्राचा तोटा म्हणजे IE ब्राउझरमधील ट्रान्सफॉर्म फंक्शन्ससाठी मर्यादित समर्थन.

स्यूडो-एलिमेंटद्वारे संरेखन

पहिल्या किंवा दुसऱ्या ब्लॉकसाठी उंची अज्ञात असताना ही पद्धत कार्य करते. आधी किंवा नंतर वापरून पालकामध्ये इनलाइन-ब्लॉक स्यूडो-एलिमेंट जोडले जाते. जोडलेल्या घटकाची उंची पालकांच्या उंचीइतकी असणे आवश्यक आहे - उंची: 100%. सामग्रीचे अनुलंब संरेखन vertical-align: मध्य वापरून सेट केले आहे.

उभ्या-संरेखित: मध्य वापरून, आतील ब्लॉक या स्यूडो-एलिमेंटच्या सापेक्ष संरेखित केला जातो. कारण पालक आणि मुलाची उंची समान आहे, आतील घटक, स्यूडो-एलिमेंटसह अनुलंब संरेखित असताना, बाह्य बॉक्ससह मध्यभागी देखील आहे.

कंटेनर: आधी (
सामग्री: "";
उंची: 100%;
vertical-align: मध्यम;
प्रदर्शन: इनलाइन-ब्लॉक;
}

आतील(
प्रदर्शन: इनलाइन-ब्लॉक;
vertical-align: मध्यम;
}

सार्वत्रिक पद्धत. इनडोअर युनिट निरपेक्ष स्थितीवर सेट केले असल्यास कार्य करत नाही.

फ्लेक्सबॉक्स

घटकांना अनुलंब संरेखित करण्याचा सर्वात नवीन आणि सोपा मार्ग. फ्लेक्सबॉक्स तुम्हाला तुमच्या इच्छेनुसार वेब पेजचे घटक व्यवस्थित करण्याची परवानगी देतो. ब्लॉक मध्यभागी ठेवण्यासाठी, तुम्हाला फक्त डिस्प्ले सेट करणे आवश्यक आहे: पालकांसाठी फ्लेक्स आणि मार्जिन: मुलासाठी ऑटो.

कंटेनर (
प्रदर्शन: फ्लेक्स;
रुंदी: 320px;
उंची: 140px;
}

आतील(
रुंदी: 120px;
समास: स्वयं;
}

फ्लेक्सबॉक्स केवळ आधुनिक ब्राउझरमध्ये कार्य करते.

एक पद्धत निवडत आहे

कोणते अनुलंब संरेखन तंत्र वापरायचे ते कार्य आणि कोणत्याही विशिष्ट प्रकरणात उपस्थित असलेल्या मर्यादांवर अवलंबून असते.

घटकांची उंची अज्ञात आहे

या परिस्थितीत, आपण चार सार्वत्रिक पद्धतींपैकी एक वापरू शकता:

1. टेबल. पालक हा HTML मध्ये किंवा डिस्प्ले-टेबल/डिस्प्ले-सेलद्वारे तयार केलेला टेबल सेल बनतो. या मूळ घटकाला अनुलंब-संरेखित: मध्य दिले आहे.

2. छद्म घटक. बाह्य ब्लॉकसाठी, रुंदी=100% आणि उभ्या-संरेखित: मध्यसह इनलाइन-ब्लॉक स्यूडो-एलिमेंट तयार केले आहे. मुलाला डिस्प्ले दिला जातो: इनलाइन-ब्लॉक आणि व्हर्टिकल-अलाइन: मधला. जेव्हा अंतर्गत ब्लॉकला परिपूर्ण स्थान दिले जाते तेव्हाच पद्धत कार्य करत नाही.

3. परिवर्तन. पालकांना स्थान मिळते: नातेवाईक. मुलाला स्थान दिले आहे: परिपूर्ण, शीर्ष: 50% आणि रूपांतर: translateY(-50%);

4. फ्लेक्सबॉक्स. बाह्य ब्लॉक प्रदर्शित करण्यासाठी सेट केले आहे: फ्लेक्स, आतील ब्लॉकला मार्जिन दिले आहे: ऑटो.

फक्त मुलाची उंची माहित आहे

बाह्य युनिट सापेक्ष स्थित आहे; आतील घटकाला निरपेक्ष स्थिती, शीर्ष: ५०% आणि मार्जिन-टॉप त्याच्या अर्ध्या उंचीइतके दिले जाते.

ज्ञात उंचीसह प्रति ब्लॉक एक ओळ

बाह्य ब्लॉकला त्याच्या उंचीच्या समान मूल्यासह एक रेषा-उंची गुणधर्म दिलेला आहे.

बाह्य ब्लॉकची उंची ज्ञात आहे, परंतु अंतर्गत घटक नाही.

पालकांना त्याच्या उंचीइतकी रेषा-उंची दिली जाते. मुलाची रेषा-उंची सामान्य किंवा कोणत्याही इच्छित मूल्यावर पुन्हा परिभाषित केली जाते आणि त्यास डिस्प्ले: इनलाइन-ब्लॉक आणि व्हर्टिकल-अलाइन: मधले दिले जातात.

CSS वापरून ऑब्जेक्टला अनुलंब मध्यभागी ठेवण्याचे अनेक मूलभूत भिन्न मार्ग आहेत, परंतु योग्य निवडणे अवघड असू शकते. आम्ही त्यापैकी काही पाहू, आणि मिळालेल्या ज्ञानाचा वापर करून एक छोटी वेबसाइट देखील बनवू.

CSS वापरून अनुलंब केंद्र संरेखन साध्य करणे सोपे नाही. सर्व ब्राउझरमध्ये बरेच मार्ग आहेत आणि सर्व कार्य करत नाहीत. चला 5 वेगवेगळ्या पद्धती आणि प्रत्येकाचे साधक आणि बाधक पाहू. उदाहरण.

पहिली पद्धत

ही पद्धत गृहीत धरते की आपण काही घटक सेट करतो