I'm building a really simple website and I'm having a lot of trouble with a <form>
etiquette inside of a <div>
one. I'm aware there are probably more "div-centering" tutorials in the Internet than stars in the universe, and it is a really "over-used" topic.
However, after I searched on a lot of different websites, tutorials and documentation, I'm unable to apply on my own code the logic to centering the items of a <form>
etiquette while leaving some out. In my code, I want to place all content in the middle just as it is right now. However, I want the "login" label to be on the left. I tried doing it with the following css code, applying the text-align:left
option but still no result.
.container {
position: absolute;
width: 600px;
height: 750px;
background-color: #493c4f;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50px;
text-align: center;
display: grid;
place-items: top;
}
.container div h1 {
color: white;
font-family: Barlow;
font-size: 50px;
}
.container form {
display: grid;
place-items: center;
top: 0;
gap: 200px;
display: block;
}
.container form label {
text-align: left;
}
<div class="container">
<div>
<form>
<h1>Login</h1>
<label for="fname">First name:</label>
</form>
</div>
</div>
And how it is looking at the moment:
Any help would be really appreciated, as I've been stuck on this for almost half a day.
You have to adjust your .css file by removing text-align: center;
from the .container{
portion and adding them to the .container div h1{
and .container form{
sections. i.e:
.container{
position: absolute;
width: 600px;
height:750px;
background-color: #493c4f;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50px;
display: grid;
place-items: top;
}
.container form h1{
color: white;
font-family: Barlow;
font-size: 50px;
text-align: left;
padding-left: 20px;
}
.container form{
display: grid;
top: 0;
gap:200px;
}
.container form label{
text-align: center;
}