Margin: 0 auto is not centering my image

问题

I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.

I've readjusted margin/padding to 0. don't know what it could be.

css for the picture:

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

}

and the html div that has to do with it:

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

FULL 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="jacobsbookkeeping1@gmail.com">EMAIL JACOBS BOOKKEEPING </a> — CALL 206.861.5664 — &copy; 2013 JACOBS BOOKEEPING &nbsp &nbsp</p>

            </div>

</body>



</html>

FULL 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}

回答1:

Put display: block; on it. By default, images are inline.

回答2:

To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:

div#pictures {
  text-align: center;
}

The other solution is the one from @One Trick Pony, and display the image as a block element and just then apply the automatic margin.

回答3:

#pictures img{
display:block;
}

Add this code then i will be centered

回答4:

i know this is an old post, but wanted to share how i solved the same problem.

My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.

回答5:

You have two options:

Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).

You might remove the display tag in #pictures.

Good luck with that.

来源：https://stackoverflow.com/questions/16502541/margin-0-auto-is-not-centering-my-image

标签

html

css

center