How to center allign input forms - html

Question

In my page I am having one drop-down, 3 text boxes and one submit button .As of now it is left alligned . I need to make it center alligned. I am using bootstrap css in my code. I am new to this field . Can someone tell how to do that . I have tried this:
<?php
echo "<form action=page2.php method=GET>";
echo '<td><select class="form-control" name="select-val">
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a4">A4</option>
<option value="a5">A5</option>
<option value="a6">A6</option>
</select></td>';
echo "<br>";
echo "<td>" ." <input align='center' type = text class = form-control name = sel_val
placeholder = 'Enter The Name'>". "</td>";
echo"<br>";
echo"<br>";echo "<td>" ." <input align='center' type = text class = form-control name = start_date
placeholder = 'Start Date(YYYY-MM-DD)'>". "</td>";
echo"<br>";
echo "<td>" ." <input align='center' type = text class = form-control name = end_date
placeholder = 'End Date(YYYY-MM-DD)'>". "</td>";
echo"<br>";
echo "<td>" ."<input align='center' class=btn type=submit value=select". "></td>";
echo "</form>";
?>
Thanks in advance.

Answer 1

First of all, don't use tables for layouts; it's bad practise if you aren't showing any tabular data.
There are a couple of ways of going about this
Method 1) I prefer this one as it makes the most sense but if you want the elements to be in different rows you can't use this method
On all the inputs and elements you want centered add display: inline-block. Then on the container element that encapsulates all of this add text-align: center.
This will center all the elements horizontally and should appear how you want it.
Method 2) You can also add a position: relative to all the elements and then do left: 50%; margin-left: -[half of your element width]. This also works and allows the elements to be on different rows while remaining horizontally centered.