如何实现HTML表格各列内部的input输入框居中对齐

问题原因 #

你给<td>设置的text-align:center仅对行内元素生效，你用到的Bootstrap框架的.form-control类默认将input设置为块级元素、宽度100%，所以会出现两个问题：

• input默认占满整个td宽度，无法在td内居中
• input内部输入的文本默认左对齐

解决方案 #

方案1：新增全局样式（改动最少，推荐） #

在你现有的<style>标签内新增以下规则即可：

/* 精准匹配当前考勤表内的输入框，不会影响其他页面元素 */
#attendance input.empHrs {
  /* 让input内部输入的文字居中 */
  text-align: center;
  /* 让input本身在td内水平居中 */
  margin: 0 auto;
}

方案2：直接给input加行内样式（适合临时调试/少量修改场景） #

如果不想改动全局样式，可以在每个EditorFor的属性中添加行内样式：

@Html.EditorFor(model => model.SundayNetHrs, new { 
  htmlAttributes = new { 
    type = "text", 
    @class = "form-control empHrs columnwidth format-text",
    // 新增行内样式
    @style = "text-align:center;margin:0 auto;" 
  } 
})

方案3：将input改为行内块元素（适合需要更多对齐灵活性的场景） #

如果后续有其他对齐需求，也可以把input改为行内块元素，让td的text-align属性直接生效：

#attendance input.empHrs {
  display: inline-block;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者Alan Pauil