HTML 内容的对齐方式答案

【问题标题】：Alignment of HTML contentsHTML 内容的对齐方式
【发布时间】：2014-02-05 17:48:18
【问题描述】：

我已经编码了按钮和输入框，但我希望它们对齐并放置在浏览器的中心，但我的输出看起来很乱。我尝试使用中心，但输入框未对齐。我如何对齐它们？提前致谢。

这是我的完整代码：

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

【问题讨论】：

哇，<center> 标签。好久没看到那个了。
根据 W3 标准，不推荐使用标签。
我只想对齐我的输入框

标签： html alignment center

【解决方案1】：

根据要求，您可以尝试使用占位符属性：

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

【讨论】：

【解决方案2】：

尝试使用 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>

【讨论】：

【解决方案3】：

<center> 工作正常，因为它认为字段和文本都是一行，并找到该行的中心。因为每个字段的标签长度不同，所以每条线都有不同的中心点。

How to align input forms in HTML 有几种不同的方法。您应该使用样式使每个字段的标签长度相同。

【讨论】：