Question

我正在尝试删除“form-strip”div上方的白色条带，并将其居中到页面中间（正好在图像下方），但没有成功。有什么建议？（我也使用了CSS重置样式）。

谢谢！

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;
}

Answer 1

尝试将form-strip div上方的div中的图像作为块元素来消除差距。

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

我不确定你想要集中在哪里 - div.form-strip？如果是这样，将“auto”的左/右边距添加到其中：

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

Answer 2

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

}

删除html div上方的空白区域并将其居中

2 个答案: