डिव टेबल-सेल वर्टिकल एलाइन काम नहीं कर रहा है

Question

मैं डीआईवी का उपयोग करके क्षैतिज और लंबवत पाठ को टेक्स्ट करने की कोशिश कर रहा हूं और टेबल-सेल के रूप में डिस्प्ले टाइप कर रहा हूं लेकिन यह आईई 8 या फ़ायरफ़ॉक्स में काम नहीं कर रहा है।

नीचे सीएसएस है कि मैं का उपयोग कर रहा है और यह कि सभी html पृष्ठ में है।

@charset "utf-8"; 
/* CSS Document */ 
html, body 
{ 
    background-color:#FFFFFF; 
    font-family:Arial, Helvetica, sans-serif; 
    margin: 0; 
    padding: 0; 
    padding-top: 5px; 
} 
div.Main 
{ 
    background-color:#FFFFFF; 
    border-collapse:collapse; 
    width:800px; 
    margin-left:auto; 
    margin-right:auto; 
} 
div.MainHeader 
{ 
    color:#C00000; 
    font-size:18pt; 
    font-weight:bold; 
    text-align:center; 
    width:800px; 
} 
div.BlackBox 
{ 
    background-color:#000000; 
    color:#FFFF00; 
    display:table-cell; 
    float:left; 
    font-size:18pt; 
    font-weight:bold; 
    height:191px; 
    text-align:center; 
    vertical-align:middle; 
    width:630px; 
} 
div.BlackBoxPicture 
{ 
    background-color:#000000; 
    float:right; 
    height:191px; 
    margin-top:auto; 
    margin-bottom:auto; 
    text-align:right; 
    vertical-align:bottom; 
    width:170px; 
} 

मैं क्या गलत कर रहा हूं?

Answer 1

मुझे लगता है कि table-cell जरूरतों एक माता पिता display:table तत्व है।

Answer 2

आप आईई 6+ पर काम करने वाले तरीके से एक फ्लोट किए गए तत्व को लंबवत रूप से संरेखित कर सकते हैं। इसे या तो पूर्ण टेबल मार्कअप की आवश्यकता नहीं है। यह विधि पूरी तरह से साफ नहीं है - इसमें रैपर शामिल हैं और कुछ चीजें हैं जिन्हें पता होना चाहिए उदा। यदि आपके पास कंटेनर को आउटपुट करने में बहुत अधिक टेक्स्ट है - लेकिन यह बहुत अच्छा है।

---

लघु जवाब: तुम बस अंदर एक तत्व को display: table-cell लागू जारी तत्व (तालिका सेल नाव नहीं है), और position: absolute और top पुराने IE के लिए के साथ एक वापस आने का उपयोग करने की जरूरत है।

---

लांग जवाब: यहाँ एक jsfiddle showing the basics है। महत्वपूर्ण सामान संक्षेप (एक सशर्त टिप्पणी एक .old-यानी वर्ग को जोड़ने के साथ):

.wrap { 
     float: left; 
     height: 100px; /* any fixed amount */ 
    } 
    .wrap2 { 
     height: inherit; 
    } 
    .content { 
     display: table-cell; 
     height: inherit; 
     vertical-align: middle; 
    } 

    .old-ie .wrap{ 
     position: relative; 
    } 
    .old-ie .wrap2 { 
     position: absolute; 
     top: 50%; 
    } 
    .old-ie .content { 
     position: relative; 
     top: -50%; 
     display: block; 
    } 

यहाँ इस विधि के साथ एक jsfiddle that deliberately highlight the minor faults है। नोट करें:

• मानक ब्राउज़र में, रैपर तत्व की ऊंचाई से अधिक सामग्री केंद्रित हो जाती है और पृष्ठ पर जाने लगती है। यह एक बड़ी समस्या नहीं है (शायद पृष्ठ को रेंगने से बेहतर दिखता है), और बहुत बड़ी सामग्री से बचने से बचा जा सकता है (ध्यान दें कि जब तक मैंने कुछ अनदेखा नहीं किया है, overflow: auto; जैसे अतिप्रवाह विधियां काम नहीं लगती हैं)
• पुरानी आईई में, सामग्री तत्व उपलब्ध स्थान को भरने के लिए नहीं फैलता है - ऊंचाई कंटेनर की सामग्री की ऊंचाई है।

वे बहुत मामूली सीमाएं हैं, लेकिन इसके बारे में जागरूक होने के लायक हैं।

Code and idea adapted from here

Answer 3

इस तरह मैं यह कर:

सीएसएस:

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    display: table 
} 
#content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle 
} 

HTML:

<div id="content"> 
    Content goes here 
</div> 

देखें

Example of vertical centering

और

CSS: centering things।

Answer 4

क्योंकि आप अभी भी नाव का उपयोग कर ...

कोशिश "फ्लोट" को हटाने और प्रदर्शन के साथ यह रैप करने के लिए: तालिका

उदाहरण:

<div style="display:table"> 
<div style="display:table-cell;vertical-align:middle;text-align:center"> 
     Hai i'm center here Lol 
</div> 
</div> 

Answer 5

पेरेंट तत्व के लिए ऊंचाई निर्धारित करें। display: table; का उपयोग किए बिना

Answer 6

फ्लोट यह एक और आवरण के साथ, यह काम करता है:

<div style="float: right;"> 
    <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div> 
</div> 

Answer 7

इस बिन देखें: http://jsbin.com/yacom/2/edit

display:table-cell; 
vertical-align:middle; 
text-align:center; 

Answer 8

को पेरेंट तत्व स्थापित करना चाहिए कुछ समय ब्रेक खड़ी तैरता संरेखित, उनसे बचने के लिए बेहतर है।

Answer 9

एक के रूप में इस प्रकार मध्य करने के लिए खड़ी गठबंधन किया जाएगा स्टाइल तत्व:

.content{ 
    position:relative; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    top:50%; 
} 

हालांकि, पेरेंट तत्व एक निश्चित ऊंचाई होना आवश्यक है। इस पहेली को देखें: https://jsfiddle.net/15d0qfdg/12/

Answer 10

मेरे मामले में, मैं एक मूल कंटेनर में स्थिति के साथ केंद्र बनाना चाहता था: पूर्ण।

<div class="absolute-container"> 
    <div class="parent-container"> 
     <div class="centered-content"> 
      My content 
     </div> 
    </div> 
</div> 

मैं शीर्ष के लिए कुछ स्थिति को जोड़ने के लिए किया था, नीचे, & सही छोड़ दिया है।

.absolute-container { 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
} 

.parent-container { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    display: table 
} 

.centered-content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle 
}