Question

当我减少浏览器宽度（或使用iPhone等移动设备）时，我试图让我的内容居中。

所有内容都居中，直到最大宽度为560px，此时任何小于560px的内容都会覆盖页面的右侧。

我的身体内的主要群体有margin: 0 auto，我认为总是让内容居中。

以下是iPhone 6上页面的图片。

HTML：

<body>

        <div class="header">

            <p><a href="../" class="no-link-style">TWIN CAT AUDIO</a></p>

        </div>

       <div class="container">

            <p class="center">Sign up for updates!</p>

            <!--SIGN UP -->
            <form method="post" name="signup" id="signup" class="center" >

                  <input type="text" name="first-name" id="first-name" placeholder="First name" class="all-input-text" />

                  <br />

                  <input type="text" name="last-name" id="last-name" placeholder="Last name" class="all-input-text"/>

                  <br />

                  <input type="email" name="email" id="email" placeholder="Email address" class="all-input-text" />

                  <br />

                  <input type="password" name="password" id="password" class="all-input-text" placeholder="Password" />

                  <br />

                  <input type="password" name="pass-confirm" id="pass-confirm" class="all-input-text" placeholder="Confirm password" />

                  <br />

                  <input type="submit" name="submit" id="signup-btn" value="SIGN UP" />

            </form>

            <div class="error-message center"></div>

            <p class="redirect center">Already have an account? <a href="login.php" id="go-to-login">Log in</a> </p>

      </div>

            <script src="../Bootstrap/js/bootstrap.min.js"></script>

CSS：

html, body {
  font-family: "Dosis", "Open Sans", sans-serif;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  color: #333;
}

.container {
  margin: 0 auto;
  max-width: 600px;
  max-height: 100%;
  padding: 0 15px 0 15px;
  border: none;
}

.header {
    color: #4F94CD;
    padding-bottom: 10px;
    text-align: center;
    font-size: 4.5em;
    width: 100%;
    height: 100px;
    background-color: white;
    margin-bottom: 40px;
    border-bottom: thin lightGrey solid;
    display: block;
    white-space: nowrap;
}

.container > p {
    font-size: 2em;
    margin-bottom: 20px;
    color: #4F94CD;
}

a.no-link-style:link, a.no-link-style:visited, a.no-link-style:hover {
  color: #4F94CD;
  text-decoration: none;
}

a.no-link-style:hover{
  font-weight: bold;
}

.center {
  text-align: center;
}

form {
  max-width: 800px;
  margin: 0 auto;
}

.all-input-text {
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 1px;
  padding: 3px;
  font-size: 1.2em;
  width: 426px;
  height: 45px;
  color: #555;
  font-family: 'Dosis', sans-serif;
}

/*Removes the yellow background color when Chrome autofills*/
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #777;
}

input::-webkit-input-placeholder {
  color: #bbb;
}

input:-moz-placeholder {
  color: #777;
}

input::-moz-placeholder {
  color: #777;
}

input:-ms-input-placeholder {
  color: #bbb;
}

input:focus::-webkit-input-placeholder {
  color: #ddd;
}

input:focus::-moz-placeholder {
  color: #aaa;
}

input[type="submit"] {
  border-radius: 20px;
  border: none;
  width: 430px;
  height: 35px;
  font-size: 1.2em;
  color: white;
  margin-top: 5px;
  margin-bottom: 20px;
  background-color: #4F94CD;
  font-family: 'Dosis', sans-serif;
}

input[type="submit"]:hover {
  background-color: #7EC0EE;
}

.error-message {
  display: none;
  margin: 0 auto;
  padding: 6px;
  margin-top: 30px;
  max-width: 300px;
  background-color: #333;
  color: white;
  font-size: 20px;
  border-radius: 8px;
}

p.redirect {
  font-size: 1.2em;
  color: #333;
}

p.redirect a {
  color: #4F94CD;
  font-weight: bold;
  text-decoration: none;
}

p.redirect a:hover {
  color: #82b0d6;
}


@media (max-width: 670px) {

  .header {
    font-size: 2.7em;
    height: 60px;
    margin-bottom: 20px;
  }

  .container > p {
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  form {
    max-width: 80%;
  }

}

Answer 1

这是因为某些元素具有明确声明的宽度。

将此添加到您的媒体查询中，它应该可以解决您的问题;

.all-input-text,
input[type="submit"] {
    width: 100%;
}

更新了小提琴：https://jsfiddle.net/ku9wsne8/3/

Answer 2

它没有对齐，它有水平滚动，因为输入字段的width位于px，在%

中

@media (max-width: 670px) {

  .header {
    font-size: 2.7em;
    height: 60px;
    margin-bottom: 20px;
  }

  .container > p {
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  form,input {
    max-width: 80%;
  }

}

请参阅更新：https://jsfiddle.net/ku9wsne8/2/

减小宽度

2 个答案: