React.js，HTML，CSS：無法弄清楚為什么 align-items 不起作用

Question

我知道這種問題被問了很多，但是盡管嘗試了很多關於其他人問題的建議答案，但我還沒有解決我的問題。

我正在嘗試使用styled-components在 div 容器中水平居中一些<input /> ，但我無法弄清楚為什么align-items不起作用（即使在您可以勾選/選擇不同的 Chrome 開發人員工具中CSS 選項適合您的風格）。

在我的<FormBox /> （這是一個樣式化的div ）中，我想對齊所有的<FormInput /> (which are styled化的 input`）。

您可以在此處找到有問題的圖像： Not_aligned_form

這是我的代碼：

import { useForm } from "react-hook-form"
import styled from 'styled-components'
import colors from '../../utils/style/colors'

const FormInput = styled.input`
    width: 400px;
    height: 40px;
    background: #FFFFFF;
    box-sizing: border-box;
    border: solid 0.4px ${colors.primary};
    box-shadow: 0px 4px 4px #5843E4;
    border-radius: 10px;    
    margin-top: 20px;   
    text-align: left;
    padding: 10px;
`
const SignupWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 1px;
  height: 100%;
`
const FormBox = styled.div`
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content:center;
    align-items: center;
    width: 450px;
    height: 500px;
    border: solid 0.4px ${colors.primary};
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
`

function Signup() { 

    const { register, handleSubmit, formState: { errors } } = useForm();
    const onSubmit = data => console.log(data);

    return(
        <SignupWrapper>
            <h1>Sign up 🎁</h1>
                <FormBox>
                    <form onSubmit={handleSubmit(onSubmit)}>                        
                        <FormInput placeholder="First name" {...register("firstName", { required: true})} />                        
                        <FormInput placeholder = "Last name" {...register("lastName", { required: true })} />
                        <FormInput type = "email" placeholder= "Email address" {...register("email", { required: true, pattern: /^\S+@\S+\.\S+$/i })} />
                        <FormInput type = "password" placeholder= "Password" {...register("password", { required: true, pattern: {value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/i, message: "8 characters, at least one uppercase, one lowercase, one number and one special character required" } })} />
                            {errors.password?.message}                      
                        <FormInput type="submit" />
                    </form>
                </FormBox>
        </SignupWrapper>
    )
}

export default Signup

提前感謝您的寶貴幫助！

Answer 1

在這里，您使用的是<form>..</form>標記..所以它為他們的子元素占據了一些空間。

為表單標簽添加 styles 屬性也如下

form {
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
    }

Answer 2

是的，我剛剛看到您的代碼在我看來，您可以將所有輸入文件包含在 a 中，例如 firstName 並嘗試 text-align="center" 在這種情況下它可能會起作用。

Answer 3

我希望這個例子能給你答案和理解。

 .container{width:500px; text-align:center; border:2px solid #f00}.container * { width:350px; }

 <div class="container"> <input type="text" placeholder="fname" /> <input type="text" placeholder="lname" /> <input type="text" placeholder="age" /> </div>