Bootstrap glyphicon不以文本为中心

Question

我正在创建一个表单，并尝试使用bootstrap组件在我的引导表单上进行验证。我正在使用c＃类库来进行服务器端验证，然后在表单满足验证条件时使用c＃code-behind来验证样式。我使用一个面板来保存我的表单控件：

<asp:Panel ID="TeacherNamePanel" CssClass="form-group" runat="server">
                    <asp:TextBox ID="tbTeacherName" CssClass="form-control input-lg" placeholder="Teacher-in-charge" runat="server"></asp:TextBox>
</asp:Panel>

并在代码隐藏中验证样式：

if (teacherName.Length == 0)
{
      TeacherNamePanel.CssClass = "form-group has-error has-feedback";
      Label span = new Label();
      span.CssClass = "glyphicon glyphicon-remove form-control-feedback";
      span.Attributes["style"] = "vertical-align:middle";
      TeacherNamePanel.Controls.Add(span);
}
else
      TeacherNamePanel.CssClass = "form-group";

但是，我的glyphicon不是在我的表单的输入控件中居中，它太低了。无论如何要纠正这个问题？试图改变.has-feedback .form-control-feedback的css中“top”的定位，但无济于事。

Answer 1

只需几种方法即可实现您的目标。

1. 使用不同的语法：

span.Attributes["style"] = "vertical-align:middle";

到

span.Attributes.Add("vertical-align", "middle");

1. 添加css类并将其应用于具有CssClass属性的标签。例如：

这是你的css文件

 .centerAlign {vertical-align: middle;}

然后以下工作

span.CssClass = "centerAlign";

并将生成：

<span class="centerAlign">your text</span>

Answer 2

尝试使用！important来强制属性覆盖预定义的属性，如下所示：

span{vertical-align:middle!important;}

Answer 3

解决！我从bootstrap.css中复制了以下css

.has-feedback .form-control-feedback {
position: absolute;
top: 25px;
right: 0;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
} 

并将其粘贴在我自己的样式表中，并在顶部和右侧进行调整以适合我的输入框。感谢您的帮助和建议！