Bootstrap glyphicon 不以文本为中心答案

【问题标题】：Bootstrap glyphicon not centred with textBootstrap glyphicon 不以文本为中心
【发布时间】：2015-01-20 19:01:38
【问题描述】：

我正在创建一个表单并尝试使用引导组件对我的引导表单进行验证。我正在使用 c# 类库进行服务器端验证，然后在表单满足验证条件时使用 c# 代码隐藏来验证样式。我使用面板来保存我的表单控件：

<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";

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

【问题讨论】：

你能做一个演示吗？只是猜测，尝试将span.Attributes["style"] = "vertical-align:middle"; 更改为span.Style.Add("vertical-align", "middle");
@Dura 你的意思是我的问题的图像吗？加进去了！
干杯，你试过我的建议了吗？ vertical-align 属性真的被应用了吗？
@Dura 我刚试过，但没用！ :-( 删除的字形图标正是它仍然存在的位置，如图所示。垂直对齐属性似乎没有被应用。
可能是因为你的span 是Label 的一个实例，它不喜欢style。当您在浏览器中检查span 元素时，它有什么css？

标签： c# html css twitter-bootstrap

【解决方案1】：

只有几种方法可以实现您的目标。

使用不同的语法：

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

到

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

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

这在你的 css 文件中

 .centerAlign {vertical-align: middle;}

那么以下应该可以工作

span.CssClass = "centerAlign";

并将生成：

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

【讨论】：

嗨，我尝试对其进行硬编码，但它不起作用！我使用了 w3 学校 <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </div> 的示例代码，但我意识到字形图标仍然不合适
@user3763216 很高兴你让它工作了。如果他们有帮助，请考虑支持答案，干杯

【解决方案2】：

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

span{vertical-align:middle!important;}

【讨论】：

垂直对齐属性不会影响字形图标的位置：-(

【解决方案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;
}

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

【讨论】：