Как центрировать входные формы allign

Question

На моей странице у меня есть одно раскрывающееся меню, 3 текстовых поля и одна кнопка отправки. В настоящее время он оставлен без знака. Мне нужно сделать его центром. Я использую bootstrap css в своем коде. Я новичок в этой области. Может кто-то сказать, как это сделать. Я пробовал:

<?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>"; 
?> 

Заранее спасибо.

Answer 1

Прежде всего, не используйте таблицы для макетов; это плохая практика, если вы не показываете никаких табличных данных.

Есть несколько способов идти об этом

Метод 1) Я предпочитаю это один, как это делает большинство смысла, но если вы хотите, чтобы элементы, чтобы быть в разных строках вы не можете использовать этот метод

На всех входах и элементах, которые вы хотите центрировать, добавьте display: inline-block. Затем на элемент контейнера, который инкапсулирует все это, добавьте text-align: center.

Это будет центрировать все элементы по горизонтали и должно появиться так, как вы хотите.

Способ 2) Вы также можете добавить position: relative ко всем элементам, а затем сделать left: 50%; margin-left: -[half of your element width]. Это также работает и позволяет элементам находиться на разных строках, оставаясь по горизонтали.