10

我对这一切都很陌生，正在尝试建立这个网站，但页面上的主图像没有居中。我已经尝试了各种居中的东西，但它们不起作用。此外，宽度百分比也被忽略。

我已将边距/填充重新调整为 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}
4

5 回答 5

20

穿上display: block;它。默认情况下，图像是内联的。

于 2013-05-11T23:09:51.127 回答
3

要居中inline（图像的默认值）或inline-block元素，只需将其居中为 text。这意味着，您将需要text-algin在父元素上使用：

div#pictures {
  text-align: center;
}

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

于 2013-05-11T23:50:04.170 回答
3 
#pictures img{
display:block;
}

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

于 2013-09-30T07:26:27.287 回答
2

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

我的图像从父类继承了 float:left。通过设置 float:none 我可以让 margin:0 auto 和 display: block 正常工作。希望它可以帮助将来的人。

于 2013-10-09T20:16:29.430 回答
1

你有两个选择：

  1. 从#pictures 中删除 img，然后将图像放入该 div 中。

  2. 将#pictures 添加到 html 中的图像标签（内联样式）。

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

祝你好运。

于 2013-05-12T22:16:20.450 回答