I have the following HTML code and i want to make my form aligned in center.
<form action="advsearcher.php" method="get">
Search this website:<input align="center" type="text" name="search" />
<input type="submit" value="Search"/>
</form>
How can I do that? Thanks in advance.
This question is related to
html
simple way:Add a "center" tag before the form tag
The last two lines are important to align in center:
.f01 {
background-color: rgb(16, 216, 252);
padding: 100px;
text-align: left;
margin: auto;
display: table;
}
Being form
a block element, you can center-align it by setting its side margins to auto:
form { margin: 0 auto; }
EDIT:
As @moomoochoo correctly pointed out, this rule will only work if the block element (your form, in this case) has been assigned a specific width.
Also, this 'trick' will not work for floating elements.
@Lucius and @zyrolasting have it right.
However, you will probably need to give the form a specified width
for it to work properly.
form {
margin: 0 auto;
width:250px;
}
Use center
:
<center><form></form></center>
This is just one method, though it's not advised.
Ancient Edit: Please do not do this. I am just saying it is a thing that exists.
This will have the field take 50% of the width and be centered and resized properly
{ width: 50%; margin-left : 25% }
May also use "vw" (view width) units instead of "%"
<center><form></form></center>
does work in most cases like The Wobbuffet mentioned above...
#form{
position:fixed;
top:50%;
left:50%;
width:250px;
}
You can adjust top & left depending on form size.
Try this :
Set the width of the form as 20% by:
width : 20%;
now if the entire canvas is 100 %, the centre is at 50%. So to align the centre of the form at the centre, 50-(20/2) = 40.
therefore set your left margin as 40% by doing this :
left : 40%;
Just put some CSS into the stylesheet like this
form {
text-align: center;
}
then you're done!
Just move align="center" to de form tag
<form align="center" action="advsearcher.php" method="get">
Search this website:<input type="text" name="search" />
<input type="submit" value="Search"/>
</form>
Source: Stackoverflow.com