html - 如何将 input[type=text] 居中，同时让所有其他元素不居中？

Question

我还有一个关于元素居中的小问题。我想过我以前问过的问题，但我似乎找不到这个问题的答案。我有以下示例代码来演示我的问题。

<div id="main" style="width: 960px;">
    <form>
        <label>Test</label>
        <input type="text" value="Test" id="inputfield" />
    </form>
    ....
</div>

现在我尝试将其视为 block 元素，使用宽度和边距来正确定位它，但不知何故失败了。我需要使用 id 字段还是建议我在每个输入文本字段周围放置一个 div(使用 #main input[type=text]{...})？

Answer 1

对于这种情况，最好的方法是根据 id #inputfiled

分配特定规则

在 CSS ^{中添加这个 Demo}

#inputfield { display: block; margin: 0 auto; }

就跨浏览器兼容性而言，依赖像 input[type="text"] 这样的属性选择器是非常危险的。

---

更新

如果你想让所有输入元素居中，而不是其他元素，你可以使用名称选择器

input,select,textarea { /* These three elements round up all the input types */
    display: block; 
    margin: 0 auto; 
}