केंद्र क्षैतिज रूप से ब्लॉक तत्व जिसमें गतिशील चौड़ाई है - सीएसएस केवल क्रॉस ब्राउज़र

Question

यह एक प्राचीन विषय है, लेकिन मैं कसम खाता हूं कि यह होना चाहिए उससे कहीं अधिक कठिन साबित हो रहा है।

मैंने समस्या दिखाने के लिए एक jsfiddle बनाया है। http://jsfiddle.net/motocomdigital/VfDfw/1/

मैंने सोचा कि मैंने इसे क्रैक किया है, लेकिन यह आईई 8 संगतता मोड में विफल रहता है।

समस्या

मैं एक symantic अन-आदेश दिया सूची में, नेविगेशन मेनू है। Div wrapper जिसमें एक निश्चित चौड़ाई है जो वेबसाइट की मुख्य चौड़ाई है।

अन-आदेशित सूची को रैपर में केंद्रीय तैरने की आवश्यकता है। लेकिन नेविगेशन में ब्लॉक तत्वों में से कोई भी सेट चौड़ाई नहीं है।

http://jsfiddle.net/motocomdigital/VfDfw/1/

मैं प्रत्येक तत्व एक अलग पृष्ठभूमि रंग रंग का है, तो आप प्रत्येक तत्व देख सकते हैं।

मैंने सोचा कि मैं एक बाएं स्थिति के रूप में div.nav पर एक फिक्स खरीद आधा आवरण चौड़ाई होने पाया, और फिर .nav उल पर -50% मार्जिन छोड़ दिया - आईई 8 अनुकूलता में असफल रहा है लेकिन मोड, बेला नीचे देखें ...

http://jsfiddle.net/motocomdigital/VfDfw/2/

किसी को भी एक समाधान या एक अधिक कुशल सीएसएस विधि बता सकते हैं। यह मेरा नूडल बेकिंग है।

धन्यवाद

---

अद्यतन

मैंने सोचा कि मैं क्यों मैं अपने बेला उदाहरण में प्रत्येक div उपयोग कर रहा हूँ के साथ मेरे सवाल का अद्यतन करना चाहिए।

मेरा नया पहेली देखें। http://jsfiddle.net/motocomdigital/VfDfw/3/

मैंने अब प्रत्येक तत्व में 10px की शीर्ष स्थिति जोड़ दी है ताकि आप इस उद्देश्य को देख सकें कि मैंने इतने सारे divs क्यों उपयोग किए हैं। लेकिन एकमात्र समस्या यह है कि यह समाधान आईई 7 अनुकूल नहीं है। इसलिए मुझे ब्लॉक तत्वों को केंद्रित करने का एक और समाधान चाहिए। मेरी इच्छा है कि फ्लोट था: केंद्र सीएसएस नियम!

1. गहरे नीले रंग की div मेरे नेविगेशन अनंत पृष्ठभूमि छवि के लिए मेरी क्षितिज 100% चौड़ाई div है।
2. लाल div रैपर है जो मेरी वेबसाइट की अधिकतम चौड़ाई है। पहेली चौड़ाई: 420 पीएक्स।
3. हरी div मेरी गतिशील एनएवी की जारी चौड़ाई, तैनात बाईं है: 210px (ऊपर चौड़ाई का 50%)
4. पीला उल, मेरे गतिशील एनएवी ली तत्वों के जारी चौड़ाई है साथ 50%
5. का नकारात्मक मार्जिन नीला ली मेरे एंकर बटन कंटेनर वाले डिवाइडर हैं।

मुझे उम्मीद है कि यह समझ में आता है। लेकिन इस समाधान ने पूरी तरह से काम किया लेकिन यह शर्म की बात है कि यह आईई 7

Answer 1

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

जब आप एक div में पाठ केंद्रित करते हैं और पाठ वास्तव में पाठ नहीं है, लेकिन इनलाइन-ब्लॉक, वे व्यवहार करते हैं जैसे वे 'शब्द' , सामग्री को किसी भी निश्चित चौड़ाई की आवश्यकता के बिना तत्वों की एक केंद्रित सूची बनाते हैं।

body { 
 
    font-family: Helvetica, Arial, Geneva, sans-serif; 
 
} 
 

 
#horizon { 
 
    height: 49px; 
 
    width: 100%; 
 
    overflow: visable; 
 
    position: relative; 
 
    background: url(images/nav-bg.jpg) no-repeat center top #041e75; 
 
    top: 100px; 
 
} 
 

 
#wrapper { 
 
    max-width: 420px; 
 
    margin: 0 auto; 
 
    height: 49px; 
 
    overflow: visible; 
 
    background: red; 
 
    padding:10px; 
 
    text-align:center; 
 
} 
 

 
.nav { 
 
    display:block; 
 
    height: 49px; 
 
    background: green; 
 
    padding:5px; 
 
    text-align:center; 
 
} 
 

 
.nav a { 
 
    color: #ffffff; 
 
} 
 

 
.nav ul { 
 
    background: yellow; 
 
    padding:5px; 
 
    display:block; 
 
    text-align:center; 
 
} 
 

 
.nav ul li { 
 
    display: inline-block; 
 
    background: blue; 
 
    overflow: visible; 
 
} 
 

 
.nav ul li a { 
 
    display: block; 
 
    height: 49px; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50); 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
} 
 

 
.nav ul li a:hover { 
 
    text-decoration: none; 
 
    background-color: rgb(6, 29, 93); 
 
    background-color: rgba(13, 43, 119, 0.95); 
 
}

<div id="horizon"> 
 
    
 
    <div id="wrapper"> 
 
    
 
     <div class="nav">     
 
     
 
      <ul> 
 
     
 
       <li><a href="#" title="home">Home</a></li> 
 
       <li><a href="#" title="about">About</a></li> 
 
       <li><a href="#" title="menu">Menu</a></li> 
 
       <li><a href="#" title="map">Map</a></li> 
 
       <li><a href="#" title="contact">Contact</a></li> 
 
     
 
      </ul> 
 
    
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>