保证金：0汽车不是我的形象集中

我很新，所有这一切，我试图建立这个网站，但网页上的主要图像不居中。我尝试了各种各样的中心事物，但他们不工作。此外，宽度百分比也被忽略。保证金：0汽车不是我的形象集中

我已将margin/padding调整为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>

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="[email protected]">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}

来源

2013-05-11 user2373912

哦，那个格式不好的男孩 – user2373912 2013-05-11 23:41:24

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

来源

2013-05-11 23:09:51

+1 - 但是在线内容会阻止它有余量吗？ – 2013-05-11 23:12:48

其实内联元素可以有左右边距，只是'auto'对他们不起作用。如果我没有弄错，这是因为它们没有预定义的宽度，所以'auto'无法计算 – 2013-05-11 23:15:50

它将它从左侧移动到右侧多一点，但它并没有一直居中。尽管接近！ – user2373912 2013-05-11 23:29:07

以中心inline-默认为图像或inline-block元素，只是居中为文本。这意味着，你将需要父元素上使用text-algin：

div#pictures { 
    text-align: center; 
}

另一种方案是从@One招式之一，并显示图像作为block元素就在这时，应用自动保证金。

来源

2013-05-11 23:50:04 pzin

没有运气。也许这是我的代码其余的东西，我还不明白的东西... – user2373912 2013-05-11 23:57:05

这不是关于运气... 你需要**从'div＃picture img'中的宽度值**中删除引号规则。此外，必须在** PARENT **中指定'text-algin：center'，而不是在图像上指定。并且只使用一种解决方案，即将图像作为内联元素保留并将父元素居中的解决方案，或者将自动边距加显示图像作为块元素。不要混合东西。 – pzin 2013-05-12 00:05:13

你有两个选择：

删除IMG从#pictures，然后把图像该专区内。
将#pictures添加到html中的图像标记（内联样式）。

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

祝你好运。

来源

2013-05-12 22:16:20

#pictures img{ 
display:block; 
}

添加该代码，那么我将集中

来源

2013-09-30 07:26:27

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

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

来源

2013-10-09 20:16:29

保证金：0汽车不是我的形象集中

回答

相关问题