CSS "table-cell" styled element: Maximum height (and overflow: hidden) -


मेरे पास डिस्प्ले: टेबल-सेल div एक डिस्प्ले में है: तालिका div क्या ऊंचाई को सीमित करने का कोई तरीका है? मैंने ऊँचाई, अधिकतम-ऊंचाई और अतिप्रवाह सेट करने की कोशिश की है: छिपा हुआ है, लेकिन इसका कोई प्रभाव नहीं है। ( ऊंचाई न्यूनतम ऊँचाई निर्धारित करता है, लेकिन अन्य कुछ भी नहीं करते हैं।

उदाहरण पर

  & lt; div class = 'तालिका देखें '& gt; & lt; div class =' ​​सेल '& gt; यह अधिकतम 100px होना चाहिए Lorem ipsum मातम aMET बैठते हैं, consectetur adipiscing elit, sED eiusmod tempor incididunt ut labore एट dolore मैग्ना aliqua केन्द्र शासित प्रदेशों के लिए सबसे अच्छा विज्ञापन राग veniam, Quis nostrud मश्क से करते हैं।। किसी भी प्रकार के काम के लिए तैयार नहीं किया जा सकता है, लेकिन यह किसी भी काम के लिए इस्तेमाल किया जा सकता है। ; & Lt; / div & gt;   

सीएसएस

  .table {display: तालिका; पृष्ठभूमि: हरा; चौड़ाई: 100px; ऊंचाई: 100px; अधिकतम-ऊंचाई : 100px; / * नजरअंदाज कर दिया * / अतिप्रवाह: छिपा हुआ; / * नजरअंदाज कर दिया * /} .cell {प्रदर्शन: तालिका सेल; ऊर्ध्वाधर- align: मध्यम; अधिकतम-height: 100px; / * नजरअंदाज कर दिया * / text-align: केंद्र; / * काम नहीं करता है * /}    

जहां तक ​​मैं इस कोड के साथ देख सकता हूं, ऐसा लगता है कि आप टेबल सेल डिस्प्ले का प्रयोग कर रहे हैं ताकि पाठ को खड़ी रूप से संरेखित करें। हालांकि, टेबल-सेल अंतर्निहित सौदा के साथ आता है जिसे आप वाई-आयाम पर नियंत्रण खो देते हैं; यही है, टेबल-सेल सभी ऊंची मापदंडों को अनदेखा कर देगा, जैसा आपने देखा है।

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

नया आउटपुट:

"अज्ञात में सेंटरिंग" पर लेख जो ऊपर ऊर्ध्वाधर केंद्रित तकनीक का वर्णन करता है:

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -