刪除html div上方的空格並將其居中

我試圖刪除「form-strip」div上方的白色條，並將它居中置於頁面中間（正好在圖像下方），但沒有成功。有什麼建議麼？（我也使用了CSS重置樣式）。刪除html div上方的空格並將其居中

謝謝！

HTML：

<!DOCTYPE html> 
<html lang="he"> 
<meta charset="UTF-8"> 
<head> 
    <title>Title</title> 
    <link href="Styles/Reset.css" rel="stylesheet" /> 
    <link href="Styles/Base.css" rel="stylesheet" /> 
</head> 

<body dir="rtl"> 
    <header> 
     <div class="title"> 
      <h1>text come here</h1> 
      <h2>text come here</h2> 
     </div> 
    </header> 

    <div class="img-strip" align="center"> 
     <img src="img/picture.jpg" class="image" /> 
    </div> 

    <div class="form-strip" align="center"> 
     <h1>text come here</h1> 
       <form method="post" accept-charset="utf-8" action=""> 

        <input type="text" class="form-control" id="name" placeholder="text come here"> 
        <input type="text" class="form-control" id="name" placeholder="text come here"> 
        <input type="text" class="form-control" id="email" placeholder="text come here"> 
        <input type="text" class="form-phone" id="phone" placeholder="text come here"> 

        <ul> 
         <li>052</li> 
         <li>054</li> 
         <li>057</li> 
        </ul> 

        <input type="submit" value="text come here"> 

       </form> 
    </div> 
    <div class="footer"> 
     <img src="img/logo.png" class="logo" /> 

     <div class="address"> 
      <h1>text come here</h1> 
      <h2>text come here</h2> 
     </div> 
    </div> 

</body> 
</html>

CSS - base.css：

body{ 
    direction: rtl; 
    background-color: #FFFFFF; 

} 

.title h1 { 
    font-family:"FbSpoiler"; 
    font-size:18px; 
    color:#1BABCD; 
    text-align:center; 
    font-weight:lighter; 
    margin-top: 25px; 
} 

.title h2 { 
    font-family:"FbSpoiler"; 
    font-size:22px; 
    color:#1BABCD; 
    text-align:center; 
    font-weight:bold; 
    margin-top: 3px; 
    margin-bottom: 7px; 
} 

img.image { 
    max-width: 100%; 
    clear: both; 
} 

.form-strip { 
    padding-top: 10px; 
    background-color:#016a88; 
    height: 70px; 
    clear: both; 
    overflow: hidden; 
    max-width: 920px; 
} 

.form-strip h1 { 
    font-family:"FbSpoiler"; 
    font-size:15px; 
    color:#ffffff; 
    font-weight:lighter; 
    margin-bottom: 7px; 
} 

.form-control { 
    width: 200px; 
    height: 25px; 
    margin-left: 4px; 
} 

.form-phone { 
    width: 150px; 
    height: 25px; 
} 

.footer { 
    padding-top: 10px; 
    padding-right: 700px; 
    background-color:#ffffff; 
    height: 100px; 
    clear: both; 
    overflow: hidden; 
    max-width: 920px; 
} 


.address h1 { 
    font-family:"FbSpoiler"; 
    font-size:10px; 
    color:#737676; 
    text-align:right; 
    font-weight:lighter; 
    margin-top: 5px; 
    margin-bottom: 3px; 
} 

.address h2 { 
    font-size:15px; 
    color:#737676; 
    text-align:right; 
    font-weight:lighter; 
    margin-top: 3px; 
    margin-bottom: 7px; 
}

來源

2014-02-26 user3355028

你能做出的jsfiddle？ – pstenstrm

現場演示或截圖也許？ – LinkinTED

這對我來說有點模糊。不知道你想要什麼。 – Siyah

嘗試使圖像中的形狀條以上的股利DIV擺脫所述間隙的塊狀元件。

div.img-strip img { 
    display: block; 
}

我不確定你想要居中 - div.form-strip？如果是添加「自動」的左/右頁邊距它：

div.form-strip { 
    margin: 0 auto; 
}

來源

2014-02-26 09:36:57 crdunst

謝謝你！這非常有幫助。你能解釋一下爲什麼我不能在.form-strip類選擇器中放置「margin：0 auto」嗎？我的意思是： .form-strip { margin：0 auto \t padding-top：10px; \t background-color：＃016a88; \t height：70px; \t明確：均; \t溢出：隱藏; \t max-width：920px; } – user3355028

是的，你可以插入到你現有的選擇器，我只是寫了上面沒有現有的CSS屬性爲清晰。是否應用顯示：塊圖像刪除差距？ – crdunst

是的！它是。謝謝，我感謝你的建議。 – user3355028

div.form-strip { 
    margin-left: 0px; 
    margin-right: 0px; 

}

來源

2014-02-26 10:25:25

刪除html div上方的空格並將其居中

回答

相關問題