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

Question

我正在尝试在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>

Answer 1

您无法使用<asp:Button>（至少没有控制适配器：http://msdn.microsoft.com/en-us/magazine/cc163543.aspx）执行此操作，因为<asp:Button>呈现<input type="submit">，而您想要的效果是通过{{ 1}}＆GT;

有一种解决方法，改为使用<button><img src="foo" /> Login</button，它支持<button runat="server">事件。但请注意，Internet Explorer 6,7和8不尊重ServerClick属性，IE 9及更高版本 - 这意味着在这些浏览器中不会引发value=""事件。

您的标记看起来像这样：

ServerClick

服务器端：

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

Answer 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>