保證金：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汽車不是我的形象集中

回答

相關問題