Alignment of HTML contents - html

Question

I have coded buttons and input boxes but I want them to be aligned and placed in the center of the browser, but my output looks messy. I tried using center but the input boxes are not aligned. How do I align them? Thanks in advance.
Here is my complete code:
<center>
Name:
<input type="text" id="NameInput">
<br>
Number:
<input type="text" id="NumberInput">
<br>
<input type="button" value="ADD" onClick="press(input.value)">
<input type="button" value="EDIT" onClick="press(input.value)">
<input type="button" value="DELETE" onClick="press(input.value)">
<br><br>
Name:
<input type="text" id="NameSearch">
<br>
Number:
<input type="text" id="NumberSearch">
<br>
<input type="button" value="SEARCH" onClick="press(input.value)">
</center>

Answer 1

Try below using margin on a div and specifying a width:
<!--ADDED THE BORDER JUST SO YOU CAN SEE WHAT THIS STYLE IS DOING-->
<div style="margin: auto; border: 1px solid red; width: 500px;">
<div>
Name: <input type="text" id="NameInput">
</div>
<div>
Number: <input type="text" id="NumberInput">
</div>
<div>
<input type="button" value="ADD" onClick="press(input.value)">
<input type="button" value="EDIT" onClick="press(input.value)">
<input type="button" value="DELETE" onClick="press(input.value)">
</div>
<div>
Name: <input type="text" id="NameSearch">
</div>
<div>
Number: <input type="text" id="NumberSearch">
</div>
<div>
<input type="button" value="SEARCH" onClick="press(input.value)">
</div>
Also take a look at this url: CSS replacement for <div align="center">
If you want to make all the input boxes align you can try something like below:
<Style>
.label
{
display: inline-block;
width: 90px;
}
</style>
<div style="margin: auto; border: 1px solid red; width: 500px;">
<div>
<span class="label">Name:</span>
<input type="text" id="NameInput">
</div>
<div>
<span class="label">Number:</span>
<input type="text" id="NumberInput">
</div>
<div>
<input type="button" value="ADD" onClick="press(input.value)">
<input type="button" value="EDIT" onClick="press(input.value)">
<input type="button" value="DELETE" onClick="press(input.value)">
</div>
<div>
<span class="label">Name:</span>
<input type="text" id="NameSearch">
</div>
<div>
<span class="label">Number: </span>
<input type="text" id="NumberSearch">
</div>
<div>
<input type="button" value="SEARCH" onClick="press(input.value)">
</div>
<div>

Answer 2

Depending on the requirements, you could try playing around with the placeholder attribute:
<input type="text" id="NameInput" placeholder="Name">

Answer 3

The <center> is working properly because it considers the field and the text to be all one line, and it finds the centre of that line. Because the label for each field is a different length, each line has a different centre point.
How to align input forms in HTML has a few different approaches. You should use styling to make the label for each field the same length.