कैप्शन-पक्ष - सीएसएस-ट्रिक्स

caption-sideसीएसएस में संपत्ति तुम कहाँ एचटीएमएल के स्थिति को परिभाषित करने की अनुमति देता है

तत्व, HTML तालिकाओं पर उपयोग किया जाता है। यह संपत्ति किसी भी तत्व पर लागू हो सकती है, जिसकी displayसंपत्ति निर्धारित है caption-side।

table ( caption-side: top; )

मूल्यों

top: डिफ़ॉल्ट। तालिका के शीर्ष पर कैप्शन देता है।
bottom: तालिका के निचले भाग में शीर्षक रखता है।
inherit: इंगित करता है कि caption-sideमूल्य अपने माता-पिता के मूल्य से विरासत में मिला है

caption-sideसंपत्ति के लिए या तो लागू किया जा सकता

element or the

display table-caption text-align

ध्यान दें कि उपरोक्त मान caption-sideतालिका के लेखन-मोड के सापेक्ष हैं। उदाहरण के लिए, एक मेज एक ऊर्ध्वाधर लेखन मोड पर सेट है, तो topऔर bottomमूल्यों तालिका की दिशा के सापेक्ष किया जाएगा।

नीचे दिए गए डेमो में एक "टॉगल" बटन शामिल है जो तालिका की caption-sideसंपत्ति के बीच में टॉगल करता है topऔर bottom, इसलिए आप डेटा की कई पंक्तियों के साथ तालिका का उपयोग करके अंतर देख सकते हैं:

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा कैप्शन-साइड प्रॉपर्टी का पेन डेमो देखें
।

अगले डेमो में, writing-modeतालिका के लिए सेट किया गया है vertical-rl। जैसा कि बटन का उपयोग करके टॉगल किया जाता है, topऔर bottomमान तालिका के लेखन-मोड के सापेक्ष होते हैं:

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा अलग-अलग लेखन-मोड के साथ कैप्शन-साइड प्रॉपर्टी का पेन डेमो देखें
।

गैर-मानक फ़ायरफ़ॉक्स-केवल मान

फ़ायरफ़ॉक्स लंबे समय से समर्थित है, और अभी भी समर्थन करता है, के लिए चार गैर-मानक मान caption-side:

left: तालिका के बाईं ओर शीर्षक रखता है।
right: तालिका के दाईं ओर कैप्शन रखता है।
top-outside: तालिका के शीर्ष पर कैप्शन को तैनात करता है, जिसके आयाम तालिका से स्वतंत्र होते हैं
bottom-outside: तालिका के निचले भाग पर स्थित कैप्शन को अपने आयामों से स्वतंत्र करता है

नीचे दिया गया डेमो केवल फ़ायरफ़ॉक्स में काम करता है, और आपको विभिन्न गैर-मानक मान सेट करने के लिए चार बटन का उपयोग करने की अनुमति देता है:

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा कैप्शन-साइड प्रॉपर्टी का केवल पेन फ़ायरफ़ॉक्स देखें
।

नए मानक मूल्य

सीएसएस विनिर्देशन का नवीनतम ड्राफ्ट में, caption-sideसंपत्ति सीएसएस तार्किक गुण स्तर 1 का हिस्सा है और शामिल मूल्यों block-start, block-end, inline-start, और inline-end। बाद के दो गैर-मानक leftऔर rightमूल्यों के अनुरूप हैं, और केवल उन गैर-मानक मूल्यों का समर्थन करने वाले उपयोगकर्ता एजेंटों द्वारा समर्थित होना आवश्यक है।

अधिक जानकारी

CSS2.1 युक्ति में कैप्शन-साइड प्रॉपर्टी
CSS2.2 युक्ति में कैप्शन-साइड प्रॉपर्टी
CSS Logical Properties 1 में कैप्शन-साइड

ब्राउज़र का समर्थन

तत्व, एक ही प्रभाव के साथ। हालांकि यह संपत्ति कैप्शन बॉक्स की स्थिति को एक पूरे के रूप में प्रभावित करेगी (कैप्शन का मूल्य गणना करता है), यह बॉक्स के अंदर पाठ के संरेखण को प्रभावित नहीं करेगा। बॉक्स के अंदर पाठ को संपत्ति का उपयोग करके संरेखित किया जा सकता है।

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
1+	1+	1+	9.2+	8+	२.१+	३.२+

उपरोक्त तालिका में समर्थन मानक topऔर bottomमूल्यों के लिए मूल समर्थन को संदर्भित करता है । फ़ायरफ़ॉक्स भी अतिरिक्त गैर मानक का समर्थन करता है left, right, top-outside, और bottom-outsideमूल्यों। नई के लिए कोई ब्राउज़र समर्थन नहीं है block-start, block-end, inline-start, और inline-endमूल्यों।