Alignment of HTML contents

Question

I have coded buttons and input boxes but I want them to be aligned and placed in the center of the browser, but my output looks messy. I tried using center but the input boxes are not aligned. How do I align them? Thanks in advance.

Here is my complete code:

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

Wow, the `` tag. Haven't seen that one in a while. – j08691 Jan 16 '14 at 17:13 — j08691, Jan 16 '14 at 17:13
The tag is deprecated according to the W3 standards. – Enijar Jan 16 '14 at 17:14 — Enijar, Jan 16 '14 at 17:14
i just want to align my input boxes – Marc Intes Jan 16 '14 at 17:20 — Marc Intes, Jan 16 '14 at 17:20

score 3 · Accepted Answer · edited May 23 '17 at 12:21

Try below using margin on a div and specifying a width:

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

Also take a look at this url: CSS replacement for <div align="center">

If you want to make all the input boxes align you can try something like below:

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

score 0 · Answer 2 · answered Jan 16 '14 at 17:19

0

Depending on the requirements, you could try playing around with the placeholder attribute:

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

answered Jan 16 '14 at 17:19

Craighead

519
3
8

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

The <center> is working properly because it considers the field and the text to be all one line, and it finds the centre of that line. Because the label for each field is a different length, each line has a different centre point.

How to align input forms in HTML has a few different approaches. You should use styling to make the label for each field the same length.

edited May 23 '17 at 12:11

Community

1
1

answered Jan 16 '14 at 17:24

brryr

11
1

Alignment of HTML contents

3 Answers3