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

Question

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

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

<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 ниже, используя маржу на 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> 

Также посмотрите на эту ссылку: CSS replacement for <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> 

Answer 2

В зависимости от требований, вы можете попробовать поэкспериментировать с атрибутом заполнителем:

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

Answer 3

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

How to align input forms in HTML имеет несколько разных подходов. Вы должны использовать стиль, чтобы метка для каждого поля была одинаковой.