为什么对齐项目会减小我的元素的大小答案

【问题标题】：Why does align items reduce the size of my elements为什么对齐项目会减小我的元素的大小
【发布时间】：2023-01-07 21:13:56
【问题描述】：

我认为 align-items center 用于使项目沿垂直轴居中。但为什么它只是挤压我的表单元素？

CSS代码

*{
    box-sizing:border-box;
}
body{
    font-family:sans-serif;
    background:#f6f5f7;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:100vh;
    margin:-20px 0 50px;

    
}

h1{
    margin:0;
    font-weight:bold;
}

p{
    font-size:14px;
    font-weight:100;
    line-height:20px;
    letter-spacing:0.5px;
    margin:20px 0 30px;
    
}

span{
    font-size:12px;
}

a{
    color:#333;
    font-size:14px;
    text-decoration:none;
    margin:15px 0;
}

.container{
    background:#fff;
    border-radius:10px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position:relative;
    overflow:hidden;
    width:768px;
    max-width:100%;
    min-height:480px;


}

.form-container form{
    background:#fff;
    flex-direction:column;
    display:flex;
    flex-direction:column;
    padding:0 50px;
    height:100%;
    
    
    
  }
  form{
    justify-content:center;
    align-items:center;
    
  }

如果您删除对齐项目中心，您将得到一个长表格，这不是我想要的长我的意思是宽度比我需要的要长。这是否必须处理对齐属性的创建方式或其他问题？

HTML



<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <link rel="stylesheet" href="style2.css">

  </head>
  <body>
    

    <h2>Weekly Coding Challenge #1: Sign in/up Form</h2>
    <div class="container" id="container">
      <div class="form-container sign-up-container">
        <form action="#">
          <h1>Create Account</h1>
          <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>or use your email for registration</span>
          <input type="text" placeholder="Name" />
          <input type="email" placeholder="Email" />
          <input type="password" placeholder="Password" />
          <button>Sign Up</button>
        </form>
      </div>
      <div class="form-container sign-in-container">
        <form action="#">
          <h1>Sign in</h1>
          <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>or use your account</span>
          <input type="email" placeholder="Email" />
          <input type="password" placeholder="Password" />
          <a href="#">Forgot your password?</a>
          <button>Sign In</button>
        </form>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>Welcome Back!</h1>
            <p>To keep connected with us please login with your personal info</p>
            <button class="ghost" id="signIn">Sign In</button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>Hello, Friend!</h1>
            <p>Enter your personal details and start journey with us</p>
            <button class="ghost" id="signUp">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
    
    <footer>
      <p>
        Created with <i class="fa fa-heart"></i> by
        <a target="_blank" href="https://florin-pop.com">Florin Pop</a>
        - Read how I created this and how you can join the challenge
        <a target="_blank" href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/">here</a>.
      </p>
    </footer>


  </body>
</html>

我试图删除 align-items center 因为我没有看到它的用途但是没有它我的表格会很长而且我期望如果我删除它不会有任何效果。

这个html文件是一个公司的表单登录网站，难道表单被align-items center缩减是常事。

有人可以解释这会有所帮助吗？

【问题讨论】：

你能不能：把你的代码变成一个可运行的 sn-p，我被困在触摸设备上所以不能为你做这件事。见stackoverflow.com/help/minimal-reproducible-example

标签： html css

【解决方案1】：

align items: center 属性对齐项目，使它们与横轴的中心完美对齐，进而将其中的所有元素挤压到它们的默认/设置宽度。

取而代之的是，您可以设置一个 width 或 max-width 属性作为表单的宽度，并设置一个 margin: auto 将其对齐在横轴的中心。

margin: auto 将它对齐到中心，因为它试图自动将所有 4 个边距调整为相等的长度，从而使它居中。

form {
   width: 70%;
   margin: auto;
}

【讨论】：