"लंबवत-संरेखण: मध्य" फ़ायरफ़ॉक्स में बीच में संरेखित नहीं होता

मैं विभिन्न आकारों के कुछ पाठ को लंबवत रूप से संरेखित करने का प्रयास कर रहा हूं, हालांकि, फ़ायरफ़ॉक्स बीच के छोटे टेक्स्ट तरीके को प्रदर्शित करता है।"लंबवत-संरेखण: मध्य" फ़ायरफ़ॉक्स में बीच में संरेखित नहीं होता

सीएसएस:

div.categoryLinks { 
    margin: 1em 16px; 
    padding: 0 4px; 
    border-width: 1px 0; 
    border-style: solid; 
    border-color: #ece754; 
    background: #f7f5b7; 
    color: #a49f1c; 
    text-align: center; 
    font-size: 1.4em; 
} 
div.categoryLinks em { 
    font-size: 0.6em; 
    font-style: normal; 
    vertical-align: middle; 
}

HTML:

<div class="categoryLinks"> 
    <em>SECTION:</em> 
    Page One &#183; 
    Page Two &#183; 
    <a href="link">Page Three</a> 
</div>

स्क्रीनशॉट: screenshot http://www.doheth.co.uk/files/valign.jpg

अद्यतन: बस स्पष्ट होना, मैं कर रहा हूँ के बारे में पता अधिक या कम कैसे vertical-align काम करता है , यानी मैं पहले से ही गलत गलत धारणाओं को जानता हूं।

अधिक जांच से, ऐसा लगता है कि इस समस्या को ठीक करने का सबसे आसान तरीका span में बड़े टेक्स्ट को लपेटना है और उस पर vertical-align सेट करना है। .categoryLinks के दो बच्चे एक दूसरे के सापेक्ष संरेखित करें। जब तक कोई अतिरिक्त मार्कअप के बिना बेहतर तरीका दिखा सकता है?

स्रोत

2009-04-08 DisgruntledGoat

लंबवत संरेखण केवल तालिका कक्षों या इनलाइन-ब्लॉक तत्वों पर अपेक्षित कार्य करता है। यदि आप अधिक जानकारी चाहते हैं तो मेरा सुझाव है कि आप Understanding vertical-align, or "How (Not) To Vertically Center Content" पढ़ लें।

संपादित करें: आपके पास कुछ और चल रहा है क्योंकि यह फ़ायरफ़ॉक्स पर मेरे लिए काम करता है। मैंने सेक्शन के फ़ॉन्ट आकार को भी गिरा दिया: ठीक नीचे और यह अभी भी केंद्रित है। क्या आपने फ़ायरबग का उपयोग यह देखने के लिए किया है कि अन्य सीएसएस इसे किस प्रकार प्रभावित कर रहा है?

यह काम करता है के रूप में:

<html> 
<head> 
<style type="text/css"> 
div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 
} 
div.categoryLinks em { 
     font-size: 0.4em; 
     font-style: normal; 
     vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<div class="categoryLinks"> 
     <em>SECTION:</em> 
     Page One &#183; 
     Page Two &#183; 
     <a href="link">Page Three</a> 
</div> 
</body>

नोट: अनुभाग फ़ॉन्ट आकार बिंदु पर जोर देना मूल 0.6em से 0.4em को बदल दिया है।

स्रोत

2009-04-08 22:33:57 cletus

बस इसमें जोड़ने के लिए, आप 'डिस्प्ले: टेबल-सेल' आज़मा सकते हैं, लेकिन मुझे यकीन नहीं है कि ब्राउज़र समर्थन इसके लिए क्या है। – inspite

वह टेक्स्ट-एलाइन के बारे में बात कर रहा है: केंद्र सीएसएस संपत्ति, वैल्यूइन एचटीएमएल संपत्ति के बारे में नहीं। –

@ buti-oxa: नहीं वह नहीं है। वह सीएसएस लंबवत-संरेखण संपत्ति के बारे में बात कर रहा है – KOGI

फ़ायरफ़ॉक्स सही ढंग से प्रस्तुत कर रहा है। ऊर्ध्वाधर-संरेखण संपत्ति इनलाइन है, जिसका अर्थ है कि यह < div> (और < पी> आदि जैसे ब्लॉक तत्वों पर लागू नहीं होता है)। डिस्प्ले जोड़ने का प्रयास करें: इनलाइन और देखें कि क्या यह काम करता है।

स्रोत

2009-04-08 22:32:22 sli

या, संभवतः, इनलाइन-ब्लॉक: मुझे यकीन है कि क्यों, लेकिन इस नियम के साथ जोड़ा, फायरफॉक्स लागू नहीं होता है नहीं कर रहा हूँ। कार्यान्वयन (और क्रॉस-ब्राउज़र समर्थन) के आधार पर यह दोनों दुनिया के सर्वश्रेष्ठ प्रदान कर सकता है। –

वह इसे पर लागू करता है SECTION: जो पहले से ही डिफ़ॉल्ट रूप से इनलाइन है। –

एम को इनलाइन ब्लॉक में सेट करने से कोई फर्क नहीं पड़ता है, यह अभी भी फ़ायरफ़ॉक्स में अधिक है। – DisgruntledGoat

लंबवत संरेखण केवल इनलाइन-ब्लॉक तत्वों पर लागू होना चाहिए (मुझे लगता है कि छवियां केवल एकमात्र चीजें हैं जिनके पास यह लेआउट गुण डिफ़ॉल्ट रूप से है), इसलिए इनलाइन तत्व को स्थिति में रखने के लिए इसका उपयोग करने के लिए, इसे पहले इनलाइन ब्लॉक में बदल दें है, तो आप यह कैसे आप एक सामान्य ब्लॉक तत्व woudl के लिए इसी तरह की स्थिति के लिए मार्जिन और गद्दी का उपयोग कर सकते हैं:

div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 

} 
div.categoryLinks em { 
      font-size: 0.6em; 

      display:inline-block; 
     vertical-align:top; 
     font-style: normal; 
     padding: 2px 0 0 0; 

}

आप हालांकि tweak it a little for firefox 2 करने के लिए है, लेकिन यह फ़ायरफ़ॉक्स वेब मानकों का समर्थन नहीं की raer उदाहरण के कारण है। दूसरी तरफ आप चिमटा से परेशान नहीं हो सकते क्योंकि कुछ लोग अभी भी एफएफएक्स 2 का उपयोग करते हैं, और यह केवल एक मामूली डिजाइन दोष है।

स्रोत

2009-04-08 22:33:37 wheresrhys

लेकिन बिंदु यह है कि एक बार जब आप प्रदर्शित कर लेंगे: इनलाइन-ब्लॉक आप इसे नीचे धक्का देने के लिए भी कुछ पैडिंग-टॉप जोड़ सकते हैं। – wheresrhys

मुझे एक ही समस्या थी। यह मेरे लिए काम करता है: माता पिता div से

white-space: nowrap;

<style type="text/css"> 
    div.parent { 
     position: relative; 
    } 

    /*vertical middle and horizontal center align*/ 
    img.child { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    </style> 

    <div class="parent"> 
     <img class="child"> 
    </div>

स्रोत

2013-01-26 19:45:34 algreat

मैं इस मुद्दों बस को हटाने तय की।

vertical-align: middle;

स्रोत

2014-04-10 15:40:48 robertovg

"लंबवत-संरेखण: मध्य" फ़ायरफ़ॉक्स में बीच में संरेखित नहीं होता

उत्तर

संबंधित मुद्दे