Come centrare l'immagine usando CSS senza bordo bianco

Ecco il mio codice CSS e HTML. Voglio mettere una singola immagine al centro e questo funziona eccetto che c'è un bordo bianco strano attorno all'immagine. Ho provato border:none; e border:0;Come centrare l'immagine usando CSS senza bordo bianco

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>

CSS:

.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; 
}

fonte

2012-10-17 Sammy Guergachi

perché non inserire la sorgente dell'immagine in "img' anziché in' css'? per esempio. '' –

E sei sicuro che l'immagine stessa non abbia un bordo bianco? Non essendo sarcastico, solo che l'ho fatto io stesso alcune volte prima di rendermi conto che il bordo bianco faceva parte dell'immagine stessa e non a causa di HTML o CSS. – robx

non so il motivo per cui si sta impostando un'immagine di sfondo per un tag img, Preferirei usare invece un tag div o span. Ma, se si vuole veramente fare questo, cercare di aggiungere alla vostra regola # immagine CSS img:

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

fonte

2012-10-17 01:31:35

Ha funzionato! Grazie! –

non so se si è tentato di semplificare il codice, ma:

1) Lo src dell'immagine mancante: <img src= "myimage.jpg" />.

2) Non usare border="0" invece in uso CSS border:none

3) Non dare uno sfondo a un'immagine, forse invece utilizzare una divisione.

Oltre a ciò, non ho visto alcun bordo bianco durante il test del codice. Puoi essere più specifico forse?

fonte

2012-10-17 01:46:15 multimediaxp

Assicurati inoltre che soon_comp.png sia esattamente larghezza: 337px; altezza: 219px; se no vedrai sicuramente dei bordi bianchi o la ripetizione dell'immagine, ma ti suggerirò caldamente di usare l'immagine con la fonte o una divisione con un'immagine di sfondo. – multimediaxp

Come centrare l'immagine usando CSS senza bordo bianco

risposta

Problemi correlati