Выравнивание содержимого HTML

Question

Выравнивание содержимого HTML

0

У меня есть закодированные кнопки и поля ввода, но я хочу, чтобы они были выровнены и помещены в центр браузера, но мой вывод выглядит беспорядочным. Я попытался использовать центр, но поля ввода не выровнены. Как выровнять их? Заранее спасибо.

Вот мой полный код:

<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>

Marc Intes 16 янв. 2014, в 18:36

Источник

0

Вау, <center> . Давно не видел этого.
j08691 16 янв. 2014, в 17:13
0

Тег <center> устарел в соответствии со стандартами W3.
Enijar 16 янв. 2014, в 17:14
1

я просто хочу выровнять свои поля ввода
Marc Intes 16 янв. 2014, в 17:20

Показать ещё 1 комментарий

Теги:

html

alignment

center

3 ответа

0

В зависимости от требований вы можете попробовать играть с атрибутом placeholder:

    <input type="text" id="NameInput" placeholder="Name">

Craighead 16 янв. 2014, в 16:18

0

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

Как выровнять входные формы в HTML есть несколько разных подходов. Вы должны использовать стиль, чтобы метка для каждого поля была одинаковой.

brryr 16 янв. 2014, в 15:29

Ещё вопросы

Тег <center> устарел в соответствии со стандартами W3.
я просто хочу выровнять свои поля ввода

user2453734 · Accepted Answer · 2014-01-16T15-47-00.000Z

Попробуйте ниже использовать margin на div и указав ширину:

<!--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>

Также взгляните на этот URL: замена CSS для <div align = "center">

Если вы хотите, чтобы все поля ввода совпадали, вы можете попробовать что-то вроде ниже:

<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>

Этот расклад хорошо сработал для меня. Спасибо