Margine: 0 auto non sta centrando la mia immagine

Sono molto nuovo a tutto questo e sto cercando di costruire questo sito, ma l'immagine principale sulla pagina non è centrata. Ho provato tutti i tipi di centrare le cose ma non funzionano. Inoltre, anche la percentuale della larghezza viene ignorata.Margine: 0 auto non sta centrando la mia immagine

Ho riposizionato margine/riempimento a 0. non so cosa potrebbe essere.

CSS per l'immagine:

#pictures img{ 
    width:"70%"; 
    margin: 0 auto; 
    padding-bottom: 80px; 
    padding-top: 20px;

}

e il div html che ha a che fare con esso:

<div id="pictures"> 
    <img src="img/homepage.png" alt="HomePage"></div>

HTML completo

<!DOCTTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Jacobs Bookeeping</title> 

    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> 

    <link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen"> 

</head> 


<body> 

    <div class="container clearfix"> 

    <div id="main"> 

    <div id="header"> 
     <img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248"> 
     </div> 


    <div id="twitter"> 
     <a href="twitter.com/"><img src="img/twitter.jpg" alt="Twitter"></a> 
    </div> 

    <div id="facebook"> 
     <a href="www.facebook.com/"><img src="img/facebook.jpg" alt="Facebook"></a> 
    </div> 


     <ul class="nav"> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Contact Us</a></li> 
       <li class="last"><a href="#">Resources</a></li> 
     </ul> 


     <div id="pictures"> 
        <img src="img/homepage.png" alt="HomePage"> 
       </div> 

      </div> 
     </div> 

    <div id="copyright"> 
       <p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — <a href="[email protected]">EMAIL JACOBS BOOKKEEPING </a> — CALL 206.861.5664 — &copy; 2013 JACOBS BOOKEEPING &nbsp &nbsp</p> 

      </div> 

</body> 



</html>

PIENO CSS

html { 
    margin: 0px; 
    padding: 0px; 

} 

body { 

    font-family:'Futura', sans-serif; 
    color: #FFFFFF; 
    font-size: 13; 
    margin: 0px; 
    padding: 0px; 
} 

#main { 
    border-top: 10px solid #EAE1C9; 
    border-right: 10px solid #EAE1C9; 
    border-left: 10px solid #EAE1C9;  
    padding-bottom: 20px; 
    background: url('../img/bg-jacobs.jpg') repeat; 
    background-color:#96B9BF; 
} 


a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#facebook img{ 
    float: right; 
    padding: 45px 5px 10px 10px; 
    position: static; 
} 

#twitter img{ 
    float: right; 
    padding: 45px 50px 20px 0px; 
    position: static; 
} 
#header img { 
     padding: 40px 0px 0px 40px; 
     float: left; 
     position: static; 
} 

ul.nav { 
    margin-top: 45px; 
    list-style: none; 
    text-transform: uppercase; 
    float: right; 
    position: relative; 

} 

ul.nav li { 
    margin: 0px 50px 0px 60px; 
    display: inline; 

} 

ul.nav li a { 
    color: #FFFFFF; 
} 

#pictures img{ 
    width:"80%"; 
    margin: 0 auto; 
    padding-bottom: 80px; 
    padding-top: 20px; 
    display: block; 
    text-align: center; 

} 

#copyright { 
    text-align: right; 
    background: #867131; 
    border-top: 10px solid #EAE1C9; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 30px; 
    font-size: 10px; 
    letter-spacing: 2px; 
    color: white; 
} 


.container{ 
    width: auto; 
    margin: 0 auto; 
} 



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

fonte

2013-05-11 user2373912

oh ragazzo che non ha formattato bene – user2373912

Metti display: block; su di esso. Per impostazione predefinita, le immagini sono in linea.

fonte

2013-05-11 23:09:51

+1 - Ma che dire di essere in linea gli impedisce di avere margini? –

In realtà gli elementi in linea possono avere margine sinistro e destro, è solo che 'auto' non funziona su di essi. Se non sbaglio, questo è perché non possono avere larghezza predefinita, quindi 'auto' non può essere calcolato –

Lo ha spostato da sinistra a un po 'più a destra, ma non è centrato fino in fondo . vicino però! – user2373912

Al centro inline -default per immagine- o inline-block elementi, solo centrarlo come testo. Ciò significa, è necessario utilizzare text-algin sull'elemento genitore:

div#pictures { 
    text-align: center; 
}

L'altra soluzione è quello @One Trick Pony, e visualizzare l'immagine come elemento block e basta quindi applicare il margine automatico.

fonte

2013-05-11 23:50:04 pzin

senza fortuna. forse è qualcosa nel resto del mio codice che non capisco ancora ... – user2373912

Non si tratta di fortuna ... Devi ** rimuovere le virgolette dal valore di larghezza ** in 'div # immagine img' regola. Inoltre, 'text-algin: center' deve essere specificato su ** PARENT **, non sull'immagine. E usa solo una soluzione, quella in cui l'immagine rimane come elemento in linea e centra l'elemento padre, o applica solo margini automatici più immagine di visualizzazione come elemento di blocco. Non mescolare le cose. – pzin

si hanno due opzioni:

Rimuovere img da #pictures e poi mettere l'immagine all'interno di quella div.
Aggiungi le # immagini all'immagine Tag in html (stile in linea).

È possibile rimuovere il tag di visualizzazione in #pictures.

Buona fortuna.

fonte

2013-05-12 22:16:20

#pictures img{ 
display:block; 
}

aggiungere questo codice allora sarò centrato

fonte

2013-09-30 07:26:27

so che questo è un vecchio post, ma voluto condividere come ho risolto lo stesso problema.

La mia immagine stava ereditando un float: a sinistra da una classe genitore. Impostando float: none Sono stato in grado di fare margine: 0 auto e display: il blocco funziona correttamente. Spero che possa aiutare qualcuno in futuro.

fonte

2013-10-09 20:16:29

Margine: 0 auto non sta centrando la mia immagine

risposta

Problemi correlati