使用css的asp.net按钮上的图像图标和文本？

我正在尝试在asp.net按钮上显示图像图标和文本。那么如何把它们放在一起呢？如果增加按钮宽度

图标

和

文本

分开。我想把它们绑在一起，增加按钮的宽度和高度

html 我想看到这样的场景 .

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

如何做到这一点

更新 正如@Dai所建议的。我是这样得到的。文本在图像上下显示得很少。我想两者都应该在中间并且相等

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

登录

您不能使用

）执行此操作，因为
呈现
，而您想要的效果是通过
登录实现的

有一种解决方法，使用
，它支持
ServerClick
事件。但是请注意，Internet Explorer 6、7和8不尊重
value=“
属性，即9和更高版本不尊重该属性-这意味着在这些浏览器中不会引发
服务器单击事件

您的标记如下所示：

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

我知道这是一个老帖子，但是

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


登录
我按你说的做了。我是这样得到的。文本在图像上下显示得很少。我希望两者都在中间且相等。@James123您可以通过使用CSS来调整按钮的
行高
、
边距
和
填充
。让它完美是留给读者的练习：）
<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

}

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