2012-10-17 14 views
5

यहां मेरा सीएसएस और एचटीएमएल कोड है। मैं केंद्र में एक छवि डालना चाहता हूं और यह काम करता है सिवाय इसके कि छवि के चारों ओर एक अजीब सफेद सीमा है। मैं border:none; और border:0;सफेद सीमा के बिना सीएसएस का उपयोग कर छवि को कैसे केन्द्रित करें

की कोशिश की है HTML:

<!DOCTYPE html> 
<html> 

<head> 
<title>Food.</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link rel="icon" type="image/png" href="favicon.ico"> 

</head> 


<body> 
<img border="0" id="image" class="centered" /> 

</body> 

</html> 

सीएसएस:

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -182px; 
    margin-left: -153px; 

} 

img#image{ 
    /*I think this is where the issue is caused*/ 
    width:337px; 
    height:219px; 
    background-image: url('soon_comp.png'); 
    background-color: transparent; 
} 


body { 
    outline: none; 
    background-color: rgb(15,15,30); 
    border-color:transparent; 
    border:0px; 
} 
+0

क्यों नहीं 'छवि' स्रोत के बजाय 'img' में अपना छवि स्रोत डालें? जैसे '' –

+0

और आप सुनिश्चित हैं कि छवि में सफेद सीमा नहीं है? व्यंग्यात्मक नहीं है, सिर्फ यह है कि मैंने यह महसूस करने से पहले कुछ बार खुद किया है कि सफेद सीमा छवि का हिस्सा थी, न कि HTML या CSS के कारण। – robx

उत्तर

9

मैं तुम क्यों एक img टैग के लिए एक पृष्ठभूमि छवि स्थापित कर रहे हैं पता नहीं है, मैं इसके बजाए एक div या span टैग का उपयोग करना चाहूंगा। लेकिन, अगर तुम सच में ऐसा करना चाहते हैं, अपने img # छवि CSS नियम में जोड़ने के लिए प्रयास करें:

img#image{ 
    content: ''; 
    ... 
} 
+0

यह काम किया! धन्यवाद! –

0

मैं अगर आप अपने कोड को आसान बनाने की कोशिश की पता नहीं है लेकिन:

1) src छवि में गायब है: <img src= "myimage.jpg" />

2) सीएसएस उपयोग border:none

3) में बजाय border="0" का प्रयोग न करें छवि की कोई पृष्ठभूमि न दें, हो सकता है बजाय एक प्रभाग का उपयोग करें।

इसके अलावा जब मैंने आपके कोड का परीक्षण किया तो मुझे कोई सफेद सीमा दिखाई नहीं दे रही थी। क्या आप शायद अधिक विशिष्ट हो सकते हैं?

+0

यह भी सुनिश्चित करें कि soon_comp.png बिल्कुल चौड़ाई है: 337 पीएक्स; ऊँचाई: 219px; यदि नहीं, तो आप निश्चित रूप से कुछ सफेद सीमाएं या छवि दोहराएंगे, लेकिन मैं दृढ़ता से छवि का उपयोग करने के लिए स्रोत या पृष्ठभूमि छवि के साथ एक विभाजन का सुझाव देना चाहूंगा। – multimediaxp

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