एक div

के भीतर एक छवि को केंद्रित करना मैंने पहले से ही div के भीतर किसी छवि की सीमा निर्धारित नहीं की है। अब मैं उस छवि को अपने युक्त div में केंद्रित करना चाहता हूं। मैंने margin: 0 auto; का उपयोग करने का प्रयास किया है लेकिन यह काम नहीं करता है।एक div

मुझे यकीन है कि मैं कुछ बेवकूफ दिख रहा हूं लेकिन मैं स्टैक ओवरफ्लो समुदाय की मदद लेना चाहता हूं, इसलिए मुझे स्क्रीन पर घूमने का एक घंटा नहीं लगता है। बहुत बहुत धन्यवाद।

<body> 
    <div id="wrapper"> 
     <div id="banner"> 

      <img src="logo3.png"/> 
      <!--<img src="kslf_logo.png"/> 
      <img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>--> 


      <div id="social_network"> 
       <a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a> 
      </div> 

     </div> 
    </div> 
</body>

यहाँ सीएसएस है ...

#banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

#banner img { 
    border: none; 
    margin: 0 auto; 
}

स्रोत

2010-01-25 Dan

block करने के लिए छवि के display संपत्ति सेट करके देखें: एक div (खड़ी और/या क्षैतिज) में एक छवि संरेखित केंद्र के लिए

banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

banner img { 
    border: none; 
    display: block; 
    margin: 0 auto; 
}

स्रोत

2010-01-25 17:55:15

बिंगो, धन्यवाद आदमी! – Dan

आपका स्वागत है, यह एक गैर-स्पष्ट सीएसएस चीज है। –

क्षैतिज: सिर्फ

text-align:center;

कोशिश :)

स्रोत

2010-01-25 17:53:06 roman

किसी कारण से मुझे इसे पृष्ठ के रूप में प्रस्तुत किए बिना HTML पोस्ट करने की लटका नहीं मिली है, इसके बारे में खेद है, लेकिन मुझे लगता है कि यह समाधान केवल आईई में काम करता है, और यह इस मामले में किसी भी तरह से काम नहीं कर रहा है, क्या वहां है एक क्रॉस ब्राउज़र इसे करने का अनुपालन तरीका है? – Dan

@ डैन: इसे ठीक किया गया। आपको चार रिक्त स्थान से हर कोड का इरादा रखना है। –

या तो

banner { 
    height:100px; 
    text-align:center; 
    width:960px; 
    padding-bottom:10px;}

या यदि img फिर विशिष्ट आकार की है

banner img { 
     display:block; 
     width: <somevalue>px; 
     border:none; 
     margin:0 auto; 
     }

काम करेंगे ..

स्रोत

2010-01-25 17:53:50

मेरा मानना है कि यह सिर्फ margin: auto; है। कोई शून्य की आवश्यकता नहीं है।

स्रोत

2010-01-25 17:53:57 Hunter

text-align: center को आपके बैनर div में लागू करने से इसकी इनलाइन और इनलाइन-ब्लॉक बच्चों (जिसमें आईएमजी टैग शामिल है) को लागू किया जाएगा।

आपका कोड क्यों काम नहीं कर रहा है इसका कारण है क्योंकि margin: 0 auto केवल ब्लॉक तत्वों को केंद्र करेगा।

स्रोत

2010-01-25 17:54:44 nickelleon

कई संपूर्ण कोशिश करता के बाद, मैं निम्नलिखित समझा।
लंबवत केंद्र को एक div में एक छवि संरेखित करने के लिए।

.div { 
display:flex; 
justify-content:center 
}

क्षैतिज रूप से केंद्र एक div में एक छवि संरेखित करने के लिए।

.div { 
display:flex; 
align-items:center; 
}

दोनों खड़ी एक div में एक छवि को केंद्रित करने के और क्षैतिज, वहाँ 2 विकल्प हैं (1)

div { 
display:flex; 
align-item:center; 
justify-content:center; 
}

(2)

.div { 
display:flex 
} 

.div > img { 
margin: auto 
}

कृपया मुझे इस, तो हमें बताएं किसी भी स्थिति में काम नहीं करता है।

स्रोत

2016-03-30 14:27:46 Malathy

उत्तर

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