React.js, HTML, CSS: can't figure out why align-items doesn't work

Question

I know this kind of question is asked a lot, but I haven't solve my problem despite trying many of suggested answers on other people's questions.

I am trying to center horizontally some <input /> in a div container, using styled-components, but I can't figure out why align-items doesn't work (even in the Chrome developer tool where you can tick/choose different CSS options for your style).

In my <FormBox /> (which is a styled div), I would like to align all the <FormInput /> (which are styled input`).

You can find an image with the problem here: Not_aligned_form

Here is my code :

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

Thank you in advance for you precious help!

Design Freek · Accepted Answer · 2021-12-28 06:31:45Z

1

Here you are using <form>..</form> tag..so it occupies some with for their child element.

Add styles property for form tag also as follow

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

edited Dec 28, 2021 at 6:31

answered Dec 28, 2021 at 5:58

Design Freek

2234 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milan Sachani · Accepted Answer · 2021-12-27 11:24:14Z

0

Yes, I just Saw your code In my opinion you can just wrap all the input filed inside a for an example firstName and try text-align="center" it might work in such a case.

answered Dec 27, 2021 at 11:24

Milan Sachani

3553 silver badges9 bronze badges

Comments

Ambuj Khanna · Accepted Answer · 2021-12-28 06:53:26Z

0

I hope this example may give you answer and understanding.

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

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

</div>

edited Dec 28, 2021 at 6:53

answered Dec 28, 2021 at 6:40

Ambuj Khanna

1,2293 gold badges15 silver badges35 bronze badges

Collectives™ on Stack Overflow

React.js, HTML, CSS: can't figure out why align-items doesn't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related