Html 如何将输入元素与文本一起居中？

目前我的网页布局如下

但我希望客户姓名、截止日期、电话等与页面上的其他标题和部分一起居中显示。我试过使用

text align:center

和

margin:0 auto

但都不起作用。有什么想法吗

这是我的密码：

*{
保证金：0
}
.集装箱{
宽度：1250px
}
.标题{
背景色：#8000FF；
保证金：自动；
宽度：50%；
边框：3px实心#41087B；
填充：10px；
}
.标题img{
浮动：左；
填充物：5px；
}
.标题h1{
颜色：白色；
线高：80px；
文本对齐：居中
}
.标签{
浮动：左；
填充物：5px；
颜色：红色；
}
.标签容器{
文本对齐：居中；
保证金：自动
}
.标签p{
填充：2px；
}
.输入框{
浮动：左；
文本对齐：居中；
}
.输入框p{
文本对齐：居中；
填充：1px
}
.标签2{
浮动：左；
填充物：5px；
颜色：红色
}
.label2 p{
填充：2件
}
.inputBox2{
浮动：左；
}
.inputBox2 p{
填充：1px
}
.内容背景{
背景色：#D8D8D8；
清除：左；
宽度：60%；
保证金：自动；
高度：200px显示：块；
}
.uploadFile.p{
文本对齐：居中；
填充：20px；
颜色：红色
}
.内容p{
文本对齐：居中；
颜色：红色；
填充：7px
}
.下拉列表p{
文本对齐：居中；
填充：40px；
左边距：8px；
高度：
}
.moreFiles{
文本对齐：居中
}
.文本框{
文本对齐：居中
}
.textBox p{
文本对齐：居中；
填充：5px
}
.按钮{
文本对齐：居中
}

订单


客户名称

到期日

电话#













接触

电子邮件

PO#











上载文件：

宽度（英寸）
高度（英寸）
量

材料
纸张
乙烯基横幅
乙烯基粘合剂
一夫多妻制
半透明乙烯基
静电吸附清除
静电粘白
反向静电吸附
户外用纸
背光胶片
泡沫
棒状体
瓦楞纸板
辛特拉
帆布
织物
一切依附
层压
没有一个
磨砂
光泽
乐山
可擦除
安装
3/16“泡沫
3/16“短吻鳄
1/8“辛特拉
24分卡
50分卡
胶背
中密度纤维板
棒状体
马索尼特
020苯乙烯
040苯乙烯
060苯乙烯
080苯乙烯
瓦楞纸板
墨水
室内的
户外的


评论



提交订单

最快的解决方案（即不重新分解CSS）是在样式末尾添加以下样式规则：

.label-container {
width: 500px;
margin: 0 auto;
}

===== 为什么这样做：

如果给

块

（或

内联块

）元素一个

左边距

和一个

右边距

的

自动

，浏览器将给该元素相等的边距-使元素在其父元素内居中

为了使这项工作顺利进行，浏览器需要知道父元素的宽度和元素的宽度（否则它无法计算两个宽度之间的差值并除以2，从而得出

左边距

和

右边距

）的长度

在CSS中，您已经声明了父级的宽度：

.container {
    width: 1250px
}

但不是元素本身的宽度

您也没有给元素一个

左边距

和

右边距

的

自动

上面的样式声明

.label-container {
width: 500px;
margin: 0 auto;
}

---

修复了这两个遗漏。

在所有输入中，将

放在它们周围。 HTML代码：

<span class="inputcentered">
<input type=....../>
<input ...../>
<input ...../>
<input ...../>
</span>

---

试着为该部分设置容器的宽度。你考虑过使用表格吗？我的经验是，在大多数情况下，这会产生最好的reult。你的

..

需要在文档的

..

中，而不是

..

@Rounin我使用的是google apps脚本，因此没有元素needed@Kali这是一个非常简单的例子：你可以在这里阅读更多关于表格的内容：如果你需要表格方面的帮助，请告诉我，我将很乐意提供帮助

span.inputcentered{
align:center;
}