html - 标题照片四处走动

问题描述

我最近收到了一些帮助来解决我的页脚位于页面中间的问题（非常感谢！）但看起来我还有另一个问题 - 我的页眉中的照片（应该居中并固定）现在更多滚动页面时向左移动：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset= "utf-8">
        <Title>Contact</Title>
        <link rel="stylesheet" href="contact3.css">
    </head>
    <body>
    <header>
        <nav>
  <ul>
    <!-- list item one -->
    <li> 
        <a href="auto2.html">Home</a> 
    </li>
    <!-- list item two -->
    <li> 
        <a href="aboutauto2.html">About</a>
    </li>
    <!-- list item three -->
    <li> 
        <a href="service3.html">Services</a>
    </li>
    <!-- list item four -->
    <li> 
        <a href="contact3.html">Contact</a> 
    </li>
  </ul>
</nav>
 <img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"> <br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="phone">Phone:</label><br>
  <input type="phone" id="phone" name="phone">
  <br>
<input type="checkbox" id="option1" name="option1" value="Paint">
  <label for="option1"> Paint Job</label><br>
  <input type="checkbox" id="option2" name="option2" value="Body">
  <label for="option2"> Body Work</label><br>
  <input type="checkbox" id="option3" name="option3" value="Clean">
  <label for="option3"> Cleaning</label><br>
  <div class="submitbutton">
  <input type="submit" value="Submit"></div>

</form>
</div>


<footer>
<nav>
  <div class="contactinfo">
    440-555-6893 • <a href="mike.tarescavage@gmail.com"> mike.tarescavage@gmail.com</a>
  </div>
  <div class="sociallinks">
        <img src= "facebook-icon.png" width=30px height=30px> <a href="https://www.instagram.com/collision_guru"><img src= "IG-icon-2.png" width=30px height=30px></a>
    </div>
</nav>
</footer>


</body>
</html>

CSS：

body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}

header {
    background: #000000;
    height: 125px;
    color: #ffffff;
    

}

a{
  color: #ffffff;
  text-decoration: none;
}
ul{
  margin: 0;
  padding: 0px;
  
  /*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
  list-style-type: none;  
  
  /*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
  margin: 0 1vw;
}




.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 50%;
  top: 20px;
  position: fixed;
  }
  h1 {
  text-align: center;
  font-family: century gothic;
  font-size: 60px;
  font-weight: bold;
  color: #000000;
}

.form-container {
  overflow: hidden;
}
form
{
  float: right;
  margin-right: 75px;
  text-align: left;
  display: inline-block;
}

input[type=text], select {
  width: 100%;
  text-align:left;
  padding: 12px 20px;
  margin: 8px 0;
 margin-left: 30px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 50px;
}
input[type=email], select {
  width: 100%;
  text-align:left;
  padding: 12px 20px;
  margin: 8px 0;
 margin-left: 30px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 50px;
}
input[type=phone], select {
  width: 100%;
  text-align:left;
  padding: 12px 20px;
  margin: 8px 0;
 margin-left: 30px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
  text-align: center;
  padding-left: 80px;
  display: block;
}
input[type=submit] {
  width: 75%;
  margin-left: 30px;
  background-color: #000000;
  color: white;
  padding: 12px 20px;
  padding-left: 30px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: in-line block;
}


.carimg {
  float: left;
  margin-left: 50px;
  padding-bottom: 90px;
}


footer {
  background: #000000;
  height: 125px;
  color: #ffffff;
  
}
.footerlinks {
  float: left;
  word-spacing: 30px;
  text-align: left;
  padding-top: 50px;
  margin-left: 20px;
}
.contactinfo {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
text-align: center;
padding-top: 50px;

}
.sociallinks {
  float: right;
  margin-right: 40px;
  word-spacing: 20px;
}

这发生在添加表单容器类之后 - 不确定这是否与它有关，或者可能需要对照片采取另一个步骤？还是完全不相关。

请让我知道你的想法。

谢谢！:)

标签： htmlcssimageheader

html - 标题照片四处走动

问题描述

解决方案

推荐阅读