I've just wrapped up creating a sign-up form, but I seem to be having trouble utilizing display:inline-block. What could possibly be the issue?
The internal elements are stubbornly glued together and refuse to budge.
(On another note, any suggestions on different techniques to center a div in the middle of the screen would greatly help!)
Take a look at the code:
JavaScript snippet:
import React from 'react'
import './signup.css';
import { Outlet } from 'react-router-dom'
function Signp() {
return (
<div className='signupcontainer'>
<form className='signup'id='signup'>
<fieldset>
<h1 >Sign-Up</h1>
<section>
<div className='FN'>First Name
<label><input type='text' name='FNi' id='inp' required/></label></div>
<div className='LN'>Last Name
<label><input type='text' name='LNi' id='inp' /></label></div>
<div>
<label>Ph.no / E-mail</label>
<label><input type='text' name='em/no' id='inp' pattern='[0-9]{3}-[0-9]{3}-[0-9]{4}' required/></label>
</div>
<div>
<label>password</label>
<label><input type='password' name='pas' id='inp' required/></label>
</div>
<div>
<label>Re-enter password</label>
<label><input type='password' name='repas' id='inp' required/></label>
</div>
</section>
<div>
<label>Gender</label>
<br/>
<label><input type='radio' Name='gen'/>MALE</label>
<label><input type='radio'Name='gen'/>FEMALE</label>
<label><input type='radio' Name='gen' />OTHERS</label>
</div>
<label><input type='button' name='submit'value='Submit' required/></label>
</fieldset>
</form>
<Outlet/>
</div>
)
}
export default Signp
CSS Code:
.signupcontainer{
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}
#signup{
border: 2px solid black;
padding: 0.5rem;
margin: 54px;
width: 500px;
display: inline-block;
align-items: center;
}
.signup h1{
justify-content: center;
text-align: center;
font-size: 30px;
}
#inp{
display: inline-block;
}