एक div यानी 6 और i7

Question

के भीतर उल को केंद्र करने की आवश्यकता है मेरे पास एक उल है कि मुझे एक div के भीतर केंद्र की आवश्यकता है। मेरे पास जो कोड है (आप नीचे पाएंगे) i6 & यानी 7 के अलावा प्रत्येक ब्राउज़र में काम करता है जहां सामग्री केंद्रित की बजाय बायीं तरफ तैरती है। मैंने अपना कोड बहुत मूलभूत बातें हटा दिया है। मैंने बिना सफलता के इस के लिए कई सुधारों के माध्यम से काम करने की कोशिश की है, इस पर किसी भी मदद की सराहना की जाएगी।

//CSS 
#galleryThumbs { 
    width:900px; 
    height:125px; 
    text-align:center; 
    margin:0px auto; 
} 
ul.thumb { 
    margin:0; 
    padding:0; 
    list-style:none; 
    display:inline-block; 
} 
ul.thumb li { 
    width:65px; 
    height:65px; 
    margin:0 2px 0 2px; 
    border:1px solid #ffffff; 
    display:inline-block; 
    float:left; 
} 

//HTML 
<div id="galleryThumbs"> 
    <ul class="thumb"> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li> 
    </ul> 
</div> 

अग्रिम में बहुत धन्यवाद ब्रेंडन

Answer 1

IE 6 और IE 7 का समर्थन नहीं करते display:inline-block

आप inline-block तत्वों

zoom: 1; 
*display: inline; 

मैं केवल IE लक्षित करने के लिए आईई सशर्त टिप्पणियों में लिपटे उन डाल करने के लिए हैक एक आईई सीएसएस के साथ इस ओवरराइड कर सकते हैं । http://www.jsfiddle.net/gaby/qArVS/2

Answer 2

IE6/7 तत्व है जो डिफ़ॉल्ट display: block से कर रहे हैं पर display: inline-block समर्थन नहीं करता। भी Quirksmode.org: CSS2 - The display declaration देखें:

आईई 6/7 केवल एक प्राकृतिक display: inline साथ तत्वों पर मूल्य स्वीकार करता है।

<ul> डिफ़ॉल्ट display: block के द्वारा होता है, तो यह काम करने के लिए नहीं जा रहा है।

समाधानों में से एक <ul> एक निश्चित चौड़ाई देने के लिए है ताकि यह margin: 0 auto द्वारा अपने माता-पिता को केंद्रित किया जा सके।

Answer 3

ऊपर (मैं यूएल के लिए चौड़ाई घोषणा के साथ एक मतलब) समाधान पर

डेमो केवल एक ही मैं पास आया है। वैसे, 2 चीजें:

1- डॉक्ट टाइप के लिए आपकी घोषणा क्विर्क मोड को ट्रिगर कर रही है क्योंकि आईएमजी टैग xhtml-style ठीक से बंद नहीं हैं।

2- पनीयार ने फ्लोट, सेंटर के लिए एक नई संपत्ति विकसित की। यह अस्तित्व में नहीं है। कम से कम मेरी किताबों में नहीं।

मेरे दो सेंट ...

Answer 4

इंटरनेट एक्सप्लोरर 7 के लिए हैक्स के बिना समाधान अपने कोड इस के लिए जोड़ है: इस के साथ

#yourdiv { 
      width: 100%; 
      position: relative; 
      text-align: center; 
    } 

      #yourdiv ul { 
        float: left; 
        position: relative; 
        left: 50% 
        text-align: center; 
      } 

        #yourdiv ul li { 
          float: left; 
          position: relative; 
          display: block; 
          right: 50%;     
        } 

आप हैक्स के बिना Internet Explorer 7 में एक अवर्गीकृत सूची केंद्रित कर सकता है ।