html - CSS 更正了 div 中子 div 的对齐方式

Question

我的 CSS 样式有下一个问题：

http://s8.postimg.org/p26jl39fp/Scr​​eenshot_571.png

我想在表单中间对齐输入（每个输入都放在自己的 div 中）。

表单的 HTML 标记：

http://ideone.com/lWYswC（刚刚发布了没有doctype等的表单内容，因为网页没有其他div，这个代码块是我html文档的唯一正文）。

它的 CSS 样式：

http://ideone.com/w97FzB

html & body 默认定义为 width/height = 100%

html, body
{
    width: 100%;
    height: 100%;
    ...

Chrome浏览器的devtools截图：

http://s8.postimg.org/azq6a53t1/Screenshot_572.png

如您所见，输入已超过 div 大小，我不知道为什么。

此外，我正在为 UI 使用引导库，它也包含在项目中。但是当我查看引导程序的源代码时，他们没有为他们的控件使用任何对齐属性。他们只是有一些用于边框半径和蓝色突出显示的 CSS 样式。

我该如何解决这个问题？

谢谢

Answer 1

真的很简单：

input { margin: 0 auto; display: block; }