Marge: 0 auto ne centre pas mon image

Je suis très nouveau à tout cela et suis en train de construire ce site, mais l'image principale sur la page n'est pas de centrage. J'ai essayé toutes sortes de centrage des choses, mais ils ne fonctionnent pas. Aussi, le pourcentage de la largeur est ignoré.

J'ai réajusté margin/padding à 0. ne sais pas ce qu'elle pourrait être.

css pour l'image:

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

}

et la div qui a à voir avec ça:

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

HTML

<!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>

CSS COMPLÈTE

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}

source d'informationauteur user2373912

14

Mettre display: block; sur elle. Par défaut, les images sont en ligne.
3

Au centre inline par défaut pour l'image— ou inline-block éléments, juste centre en tant que texte. Cela signifie, que vous aurez besoin d'utiliser text-algin sur l'élément parent:
```
div#pictures {
text-align: center;
}
```
L'autre solution est celle de @Poney d'Un tour, et l'affichage de l'image en tant que block élément et il suffit alors d'appliquer le automatique de la marge.
2
```
#pictures img{
display:block;
}
```
Ajouter ce code, alors je vais être centrée
2

je sais que c'est un vieux post, mais je voulais partager ce que j'ai résolu le même problème.

Mon image a été hérité d'un float:left à partir d'une classe parent. Par la mise en float:none j'ai pu faire margin:0 auto et display: block fonctionner correctement. Espérons qu'il peut aider quelqu'un dans le futur.
1

Vous avez deux options:
1. Supprimer img de #photos puis placer l'image à l'intérieur de div.
2. Ajoutez le #photos de la Balise image dans le html (style en ligne).
Vous pouvez supprimer l'affichage de la balise #photos.

Bonne chance avec ça.

Vous devez vous connecter pour publier un commentaire.