带有css的asp.net按钮上的图像图标和文本？答案

【问题标题】：Image icon and text on asp.net button with css?带有css的asp.net按钮上的图像图标和文本？
【发布时间】：2014-05-09 08:36:06
【问题描述】：

我正在尝试在 asp.net 按钮上显示图像图标和文本。如何把它们放在一起？如果增加按钮宽度Icon 和text 是分开的。我想绑在一起并增加按钮的宽度和高度。

html

<asp:Button ID="btnLogin" runat="server" CssClass="login" Text="Login" />

css

  .login {
          border: 1px solid #868686;
          border-radius: 5px;
          color: black;
          padding: 10px 10px 10px 25px;
          background: url(../Images/arrow_plain_green_E.png) left center no-repeat;
          background-color: #EDEDED;
          width: 100px;
}

我想看到这样的。

现在我的按钮也显示为平面图像。我想像上面的例子一样显示。

如何做到这一点？

更新

正如@Dai 建议的那样。我得到了这样的。文字显示在图像下方。我希望两者都应该居中且相等。

<button runat="server" id="loginButton" type="submit">
       <img src="Images/arrow_plain_green_E.png" alt="" />
       Login
</button>

【问题讨论】：

标签： asp.net css html button

【解决方案1】：

你不能用 <asp:Button> 做到这一点（至少不能没有控制适配器：http://msdn.microsoft.com/en-us/magazine/cc163543.aspx），因为 <asp:Button> 呈现 <input type="submit"> 而你想要的效果是用 <button><img src="foo" /> Login</button 实现的>

有一个解决方法，改用<button runat="server">，它支持ServerClick 事件。但是请注意，Internet Explorer 6、7 和 8 不尊重 value="" 属性，而 IE 9 及更高版本则这样做 - 这意味着在这些浏览器中不会引发 ServerClick 事件。

您的标记将如下所示：

<button runat="server" id="loginButton" type="submit">
    <img src="Images/arrow_plain_green_E.png" alt="" />
    Login
</button>

服务器端：

this.loginButton.ServerClick += new EventHandler(loginButton_ServerClick);

private void loginButton_ServerClick(Object sender, EventArgs e) {

    // do stuff

}

【讨论】：

我按你说的试过了。我得到了这样的i.stack.imgur.com/sw02U.png。文字显示在图像下方。我希望两者都应该居中且相等。
@James123 你可以通过 CSS 按钮的 line-height、margin 和 padding 来调整它。让它完美是留给读者的练习:)

【解决方案2】：

我知道这是一篇旧帖子，但是...

<button runat="server" id="loginButton" type="submit">
  <img src="Images/arrow_plain_green_E.png" alt="" style="vertical-align: middle;" />
  <span style="vertical-align: middle;"> Login</span>
</button>

【讨论】：