Как центрировать поле ввода?

ProgramBox

Как центрировать поле ввода?

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я не очень хорошо разбираюсь в использовании отображаемых значений для организации форм, было бы здорово, если бы вы привели мне пример возможности организации современным способом.

Я создаю систему входа / регистрации, и я хочу центрировать поля ввода в div. Вот код формы входа в систему:-

 <body style='font-family: Times New Roman, verdana, sans-serif;'>
    <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
        <h1>Register Now!</h1>
        <br />
        <form action='' method='post'/>
            <table>
                <tr>
                    <td>
                        <b>Username:</b>
                    </td>
                    <td>
                        <input type='text' name='username' style='padding: 4px'/>
                    </td>
                <tr>
                    <td>
                        <b>Password:</b>
                    </td>
                    <td>
                        <input type='password' name='password' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Re-enter Password</b>
                    </td>
                    <td>
                        <input type='passsword' name='passwordconfirm' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>First and Last Name:</b>
                    </td>
                    <td>
                        <input type='text' name='name' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='submit' name='register' value='Complete Registration'/>
                    </td>
                </tr>
            </table>
        </form>
        <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
    </div>
</body>

1. Вы можете использовать html <center> </center> тег для центрирования полей ввода в div

2. Вы хотите центрировать поля ввода с их метками?

3. @Jahid26 <center> Элемент устарел

4. вы могли бы просто добавить это правило css в свою таблицу. таблица { поле: 0 автоматически; }

5. Помог ли мой ответ?

Ответ №1:

Самое простое из возможных — это придать форму display: inline-block .

Настройка text-align: left; на table будет управлять label выравниванием текста s

 <body style='font-family: Times New Roman, verdana, sans-serif;'>
    <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
        <h1>Register Now!</h1>
        <br />
        <form action='' method='post' style="display: inline-block" />
            <table style="text-align: center;">
                <tr>
                    <td>
                        <b>Username:</b>
                    </td>
                    <td>
                        <input type='text' name='username' style='padding: 4px'/>
                    </td>
                <tr>
                    <td>
                        <b>Password:</b>
                    </td>
                    <td>
                        <input type='password' name='password' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Re-enter Password</b>
                    </td>
                    <td>
                        <input type='passsword' name='passwordconfirm' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>First and Last Name:</b>
                    </td>
                    <td>
                        <input type='text' name='name' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
                    </td>
                </tr>
            </table>
        </form>
        <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
    </div>
</body>

Примечание сбоку:

Обновив последнее tr таким образом, вы также получите красиво расположенную кнопку

 <tr>
  <td>
  </td>
  <td>
    <input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
  </td>
</tr>

Ответ №2:

вы могли бы просто добавить правило css в свою таблицу

     table{
         margin:0 auto;
    }

Ответ №3:

Самый простой способ сделать это — использовать тег center <center> </center>

Я отредактировал ваш код, чтобы центрировать всю форму.

 <body style='font-family: Times New Roman, verdana, sans-serif;'>
    <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
        <h1>Register Now!</h1>
        <br />
        <center>
        <form action='' method='post'/>
            <table>
                <tr>
                    <td>
                        <b>Username:</b>
                    </td>
                    <td>
                        <input type='text' name='username' style='padding: 4px'/>
                    </td>
                <tr>
                    <td>
                        <b>Password:</b>
                    </td>
                    <td>
                        <input type='password' name='password' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Re-enter Password</b>
                    </td>
                    <td>
                        <input type='passsword' name='passwordconfirm' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>First and Last Name:</b>
                    </td>
                    <td>
                        <input type='text' name='name' style='padding: 4px'/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='submit' name='register' value='Complete Registration'/>
                    </td>
                </tr>
            </table>
        </form>
        </center>
        <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
    </div>
</body>

Ответ №4:

фрагмент ниже

 form{
  text-align:center;
}
#form_table{
display:inline-table;
}

 <body style='font-family: Times New Roman, verdana, sans-serif;'>
  <div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;' id="meta_container">
    <h1>Register Now!</h1>
    <br />
    <form action='' method='post'/>
    <table id="form_table">
      <tr>
        <td>
          <b>Username:</b>
        </td>
        <td>
          <input type='text' name='username' style='padding: 4px' />
        </td>
        <tr>
          <td>
            <b>Password:</b>
          </td>
          <td>
            <input type='password' name='password' style='padding: 4px' />
          </td>
        </tr>
        <tr>
          <td>
            <b>Re-enter Password</b>
          </td>
          <td>
            <input type='passsword' name='passwordconfirm' style='padding: 4px' />
          </td>
        </tr>
        <tr>
          <td>
            <b>First and Last Name:</b>
          </td>
          <td>
            <input type='text' name='name' style='padding: 4px' />
          </td>
        </tr>
        <tr>
          <td>
            <input type='submit' name='register' value='Complete Registration' />
          </td>
        </tr>
    </table>
    </form>
    <h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
  </div>
</body>

Метки: Как центрировать поле ввода?