Question

我对这一切都很陌生，我正在尝试建立这个网站，但页面上的主要图像并不是居中的。我尝试了各种各样的中心事物，但它们不起作用。此外，宽度百分比也被忽略。

我已经将边缘/填充重新调整为0.不知道它可能是什么。

css图片：

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

}

和与之有关的html div：

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

            </div>

</body>



</html>

完整的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}

Answer 1

将display: block;放在上面。默认情况下，图像是内联的。

Answer 2

要将inline - 默认设置为图片或inline-block元素，只需将其置于文本中心。这意味着，您需要在父元素上使用text-algin：

div#pictures {
  text-align: center;
}

另一个解决方案是来自@One Trick Pony的解决方案，并将图像显示为block元素，然后应用自动边距。

Answer 3

#pictures img{
display:block;
}

添加此代码，然后我将居中

Answer 4

我知道这是一个老帖子，但想分享我是如何解决同样的问题的。

我的图片继承了一个浮动：从父类继承。通过设置float：none，我可以设置margin：0 auto并显示：block正常工作。希望它可能在将来帮助某人。

Answer 5

您有两种选择：

从#pictures中删除img，然后将图片放入该div中。
将#pictures添加到html（内联样式）中的图片标记。

您可以删除#pictures中的显示标记。

祝你好运。

保证金：0自动不是我的图像居中

5 个答案: