Bootstrap复选框左对齐求助：form-control类复选框居中如何调整？

嘿，我懂你遇到的这个糟心问题了——给复选框加了form-control类后，在IE9里居然乖乖居中了，哪怕加了margin样式也没起作用。其实根源在于form-control这个类本身：它是为文本输入框、下拉选择框这类控件设计的，默认带的display:block、width:100%，甚至可能继承的text-align:center样式，都会让复选框这种小元素在容器里“被迫”居中，尤其是IE9对这些样式的解析特别“认死理”。

下面给你两个可行的解决方案，按需选就行：

方案1：别给复选框用form-control类（推荐） #

form-control本来就不是为复选框设计的，要是能调整HTML结构，建议换成专门的复选框样式类（比如Bootstrap里的form-check-input，如果你用的是Bootstrap框架的话），从根源上避免样式冲突。修改后代码大概是这样：

<input type="checkbox" class="form-check-input" id="txtPEPFlag" name="txtPEPFlag" value="Y">

方案2：保留form-control类，用CSS强制覆盖样式 #

要是因为项目限制没法改类名，那就用更具体的样式来“怼”掉form-control的默认设置，IE9和其他浏览器都能生效：

内联样式快速调整 #

直接在input标签里更新style属性：

<input type="checkbox" class="form-control" style="margin: 0 !important; display: inline-block; width: auto; text-align: left;" id="txtPEPFlag" name="txtPEPFlag" value="Y">

外部/内部CSS（更规范的做法） #

把样式写到CSS文件或者页面的<style>标签里，避免内联样式乱成一团：

#txtPEPFlag.form-control {
  display: inline-block !important;
  width: auto !important;
  text-align: left !important;
  margin: 0 !important;
}

为啥这些样式管用？ #

• display: inline-block：让复选框不再占满整个容器宽度，只占自身需要的空间
• width: auto：取消form-control默认的width:100%，避免元素被不必要地拉伸
• text-align: left：强制内容左对齐，覆盖可能继承的居中样式
• !important：确保这些样式优先级超过form-control的默认设置（IE9对优先级的处理需要这个来保证生效）

这么调整完，你的复选框在IE9里就能乖乖左对齐啦！

内容的提问来源于stack exchange，提问作者Imad Abu Hayyah