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

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

भिन्न अनुलंब-संरेखित मूल्ये

अनुलंब-संरेखित गुणधर्म तीन भिन्न प्रकारची मूल्ये घेते: कीवर्ड, टक्केवारी आणि लांबी. प्रत्येक मूल्य एका ओळीत किंवा लक्ष्य घटकाच्या मूळ (कंटेनर) घटकाशी संबंधित उभ्या स्थितीचे प्रतिनिधित्व करते.

वरील HTML कोड एक साधे वेब पृष्ठ तयार करतो जे चार घटक प्रदर्शित करते: लिंक केलेला मजकूर, एक प्रतिमा, एम्बेड केलेला व्हिडिओ आणि एक टेबल.

मजकूर अनुलंब संरेखित कसा करायचा

डीफॉल्टनुसार, बहुतेक मजकूर घटक (जसे की शीर्षक, <p> आणि <li> टॅग) ब्लॉक घटक असतात. या घटकांना अनुलंब संरेखित करण्याचा एकमेव मार्ग म्हणजे प्रथम त्यांना डिस्प्ले गुणधर्म वापरून इनलाइन घटकांमध्ये रूपांतरित करणे.

तथापि, काही मजकूर घटक जसे की <a> आणि <span> टॅग इनलाइन आहेत. परिणामी, ते उभ्या-संरेखित गुणधर्मास समर्थन देतात. मजकूर अनुलंब संरेखित करण्यासाठी, फक्त CSS अनुलंब-संरेखित गुणधर्मासाठी योग्य मूल्य नियुक्त करा.

मूळ HTML दस्तऐवजात वरील CSS कोड जोडल्याने <a> टॅग मजकूराचा वरचा भाग पंक्तीमधील सर्वात उंच घटकाच्या शीर्षस्थानी संरेखित होईल.

वरील CSS मजकूर घटकाला अशा स्थितीत संरेखित करते जे मूळ घटकाच्या बेसलाइनच्या 50% खाली आहे. ते तुमच्या ब्राउझरमध्ये खालील आउटपुट तयार करते.

जसे तुम्ही वरील इमेजमध्ये पाहू शकता, मजकूर घटक प्रतिमा आणि व्हिडिओ घटकांच्या खाली एक स्थान व्यापतो, जे समान ओळीवर आहेत. हा घटक बेसलाइनवर किंवा वर ठेवण्यासाठी, सकारात्मक टक्केवारी मूल्य वापरा.

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

वरील कोड इमेज एलिमेंटच्या बेसलाइनला मूळ घटकाच्या बेसलाइनच्या 25% वर संरेखित करतो.

टेबलमधील आयटम अनुलंब कसे संरेखित करावे

टेबलसह उभ्या-संरेखित गुणधर्म वापरणे थोडे अवघड आहे, कारण टेबल एक ब्लॉक घटक आहे. तथापि, <th> आणि <td> टॅग इनलाइन घटक आहेत. म्हणून, तुम्ही टेबलमधील मजकुरावर CSS vertical-align गुणधर्म वापरू शकता.

तुम्ही आता तुमच्या वेबपृष्ठावरील घटक संरेखित करू शकता

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *