居中 "Contact Box" 并使其响应

Centering a "Contact Box" & Making it Responsive

我正在尝试在我的网站上创建联系页面。我希望联系表(又名 "name,email,message" 框)居中并保持在页面居中,即使 window 大小已调整。但是,我 运行 遇到了一些问题。

我让联系人框居中,但是当我为我的导航栏(我在所有其他页面上都有)实现代码时,它完全改变了联系人框的位置,而是将它一直拉到最左边,也就是导航栏所在的位置。

我假设在我的导航条码中的某处它会调整其他所有内容的位置,但是因为我对基本 HTML、CSS、&Javascript 我无法找出这背后的原因。

如果有人能提供任何关于导致 this/how 修复它的见解,我们将不胜感激!谢谢!

下面是我的CSS和HTML:

body { 
  font-family: 'Raleway', sans-serif;
  background:url("../images/example.jpg"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  }

/*CONTACT BOX*/

form { 
  max-width:420px; 
  margin:200px auto;
  }

.feedback-input {
  color:white;
  font-family: "Avenir", Arial, sans-serif;
/*  font-weight:500;*/
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }





/*NAV BAR*/

/*style of the button*/
.dropbtn{
    background-color: rgba(255,255,255,0);
    color: white;
/*    margin:0 auto;*/
    font-size: 16px;
    border: none;
    cursor: pointer;
    
}

/*the div that controls the position of menu content*/
.dropdown {
    position: fixed;
    left: 0;
    top: 0;
    display: inline-block;
 
}

/*dropdown content*/
.dropdown-content {
    /*font-family: ;*/
    display: none;
/*    right: 0;*/
    background-color: #f9f9f9;
    max-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/*links inside of dropdown*/
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}



/*show menu on hover*/
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:active .dropdown-content{
  background-color:red;
}

/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
    background-color: #ff3385;
}
<!DOCTYPE html>
<html>
 <title>Em || Contact</title>
  <link rel="stylesheet" href="../css/contact.css">
<body>

<div class="dropdown">
  <button class="dropbtn"><font size="15"> &#x2630 </font></button>
  <div class="dropdown-content" style="left:0;">
    <a href="../index.html"  class="active">Home &#9756</a>
    <a href="../html/about.html"  class="active">About &#9786</a>
    <a href="../html/contact.html">Contact &#x260F</a>
    <a href="#">Portfolio &#9825</a>
  </div>

<form action="mailto:example@gmail.com" method="post" enctype="text/plain">    
  <input type="text" name="name"  class="feedback-input" placeholder="Name" />   
  <input type="text" name="email" class="feedback-input" placeholder="Email" />
  <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
  <input type="submit" value="SUBMIT"/>
</form>

<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>

您忘记为 <div class="dropdown"> 添加结尾 </div>。这是一个固定的 html:

仅供参考:您始终可以在线验证生成的 html:https://validator.w3.org/ 以检查您的代码是否正确。

body { 
  font-family: 'Raleway', sans-serif;
  background:url("../images/example.jpg"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  }

/*CONTACT BOX*/

form { 
  max-width:420px; 
  margin:200px auto;
  border: 1px solid red;
  }

.feedback-input {
  color:white;
  font-family: "Avenir", Arial, sans-serif;
/*  font-weight:500;*/
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }





/*NAV BAR*/

/*style of the button*/
.dropbtn{
    background-color: rgba(255,255,255,0);
    color: white;
/*    margin:0 auto;*/
    font-size: 16px;
    border: none;
    cursor: pointer;
    
}

/*the div that controls the position of menu content*/
.dropdown {
    position: fixed;
    left: 0;
    top: 0;
    display: inline-block;
   z-index: 100;
}

/*dropdown content*/
.dropdown-content {
    /*font-family: ;*/
    display: none;
/*    right: 0;*/
    background-color: #f9f9f9;
    max-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/*links inside of dropdown*/
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}



/*show menu on hover*/
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:active .dropdown-content{
  background-color:red;
}

/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
    background-color: #ff3385;
}
<!DOCTYPE html>
<html>
 <title>Em || Contact</title>
  <link rel="stylesheet" href="../css/contact.css">
<body>

<div class="dropdown">
  <button class="dropbtn"><font size="15"> &#x2630 </font></button>
  <div class="dropdown-content" style="left:0;">
    <a href="../index.html"  class="active">Home &#9756</a>
    <a href="../html/about.html"  class="active">About &#9786</a>
    <a href="../html/contact.html">Contact &#x260F</a>
    <a href="#">Portfolio &#9825</a>
  </div>
</div>

<form action="mailto:example@gmail.com" method="post" enctype="text/plain">    
  <input type="text" name="name"  class="feedback-input" placeholder="Name" />   
  <input type="text" name="email" class="feedback-input" placeholder="Email" />
  <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
  <input type="submit" value="SUBMIT"/>
</form>

<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>