I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something similar to this: image. However, my current layout looks like this: image.
This is my HTML code:
<div className="container">
<h1 className="title">Create an account</h1>
<form className="form">
<div className="form-outline">
<label className="input-label">Your Name</label>
<input
name="username"
type="text"
className="input"
value={input.username}
onChange={onInputChange}
onBlur={validateInput}
/>
</div>
...
</form>
Here is my CSS code:
.container {
padding: 16px;
width: 80%;
margin: 5% auto 0 auto;
}
...
.login-here:hover {
color: #0a58ca;
}
Edited:
I also attempted the following:
.input-label {
color: #6c757d;
}
.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
However, my label ends up in the middle of the screen as shown in this image. Using float: left for the label did not achieve the desired effect. I need the label to be positioned on the left side while making the input wider.