Текст на кнопке изображения в C# asp.net 3.5

<button runat = "server" 
  style = "background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
  your text here<br/>and some more<br/><br/> and some more ....
  </button>

Вы не можете этого сделать с ImageButton.

Однако вы можете использовать простой Button, установить текст и добавить фоновое изображение (bluebutton.gif) с помощью CSS для достижения желаемого эффекта.

Я не думаю, что вы можете писать текст в элемент управления ImageButton в ASP.NET. Вы можете сгенерировать изображение на лету, если это то, что вам нужно, и написать текст из своего кода, но это будет слишком сложно, используйте вместо этого обычную кнопку с CSS, если ваше изображение не может быть сгенерировано с помощью CSS.

Вы также можете сделать это с помощью asp: Label, например:

<style type = "text/css">
    .faux-button
    {
        cursor:pointer;
    }
</style>

<div class = "faux-button">
    <asp:ImageButton ID = "ibtnAddUser" 
        runat = "server" 
        ImageUrl = "~/Images/add.gif" 
        AlternateText = "Add a user image" />
    <asp:Label ID = "lblAddUser" 
        runat = "server" 
        Text = "Add User" 
        AssociatedControlID = "imgClick" />
</div>

Этот совет от dotnetslave.com сработал для меня:

<asp:LinkButton 
    CssClass = "lnkSubmit" 
    ID = "lnkButton" 
    runat = "server">SUBMIT</asp:LinkButton>

a.lnkSubmit:active
{    
    margin:0px 0px 0px 0px;
    background:url(../../images/li_bg1.jpg) left center no-repeat;
    padding: 0em 1.2em;
    font: 8pt "tahoma";
    color: #336699;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0px;

}

Невозможно добавить текст внутри кнопки изображения. Я тоже столкнулся с той же проблемой. Мое решение заключалось в использовании кнопки ссылки вместо кнопки изображения. Просто добавление изображения в тег стиля должно работать.

Я понимаю, что это старый пост, но недавно я решил ту же проблему для себя.

Я создал серверный элемент управления ImgButton, чтобы отобразить это:

<button> <img src = "button_icon.png" /> Caption Text </button>

Использование CSS для стилизации фонового изображения имеет некоторые недостатки, в основном:

• Текст имеет тенденцию перекрывать изображение, если вы не сообразите с выравниванием изображения по левому краю и текста с выравниванием по правому краю (что тогда неудобно, если вы добавите язык RTL в микс)
• Изображение является фоновым и не выглядит «на кнопке», когда мы нажимаем на кнопку, оно не «толкается» так же, как текст.

Я попытаюсь вставить здесь код, но также здесь есть полный исходный код и примеры: Кнопка с тегом Img и текстом подписи

ImgButton.cs:

[DefaultProperty("Text")]
[DefaultEvent("Click")]
[ToolboxData("<{0}:ImgButton runat=server></{0}:ImgButton>")]
public class ImgButton : WebControl, IPostBackEventHandler
{
    #region Public Properties

    public enum ImgButtonStyle
    {
        Button,
        Anchor
    }

    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("")]
    [Localizable(true)]
    public string Text
    {
        get
        {
            String s = (String)ViewState["Text"];
            return ((s == null) ? String.Empty : s);
        }

        set
        {
            ViewState["Text"] = value;
        }
    }
    [EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(UITypeEditor))]
    public string ImgSrc { get; set; }
    public string CommandName { get; set; }
    public string CommandArgument { get; set; }
    [EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]
    public string NavigateUrl { get; set; }
    public string OnClientClick { get; set; }
    public ImgButtonStyle RenderStyle { get; set; }
    [DefaultValue(true)]
    public bool UseSubmitBehavior { get; set; }
    [DefaultValue(true)]
    public bool CausesValidation { get; set; }
    public string ValidationGroup { get; set; }
    [DefaultValue(0)]
    public int Tag { get; set; }

    #endregion

    #region Constructor

    public ImgButton()
    {
        Text = "Text";
        ImgSrc = "~/Masters/_default/img/action-help.png";
        UseSubmitBehavior = true;
        CausesValidation = true;
    }

    #endregion

    #region Events

    // Defines the Click event.
    public event EventHandler Click;
    public event CommandEventHandler Command;

    protected virtual void OnClick(EventArgs e)
    {
        if (Click != null)
        {
            Click(this, e);
        }
    }

    protected virtual void OnCommand(CommandEventArgs e)
    {
        if (Command != null)
        {
            Command(this, e);
        }
        RaiseBubbleEvent(this, e);
    }

    public void RaisePostBackEvent(string eventArgument)
    {
        if (CausesValidation)
        {
            Page.Validate(ValidationGroup);
            if (!Page.IsValid) return;
        }
        OnClick(EventArgs.Empty);
        if (!String.IsNullOrEmpty(CommandName))
            OnCommand(new CommandEventArgs(CommandName, CommandArgument));
    }

    #endregion

    #region Rendering

    // Do not wrap in <span> tag
    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.Write("");
    }

    protected override void RenderContents(HtmlTextWriter output)
    {
        string click;
        string disabled = (Enabled ? "" : "disabled ");
        string type = (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior ? "submit" : "button");
        string imgsrc = ResolveUrl(ImgSrc ?? "");

        if (String.IsNullOrEmpty(NavigateUrl))
            click = Page.ClientScript.GetPostBackEventReference(this, "");
        else
            if (NavigateUrl != null)
                click = String.Format("location.href='{0}'", ResolveUrl(NavigateUrl));
            else
                click = OnClientClick;

        switch (RenderStyle)
        {
            case ImgButtonStyle.Button:
                if (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior)
                {
                    output.Write(String.Format(
                        "<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" title=\"{5}\"><img src=\"{6}\" alt=\"{5}\"/>{7}</button>",
                        ClientID,
                        disabled,
                        CssClass,
                        type,
                        UniqueID,
                        ToolTip,
                        imgsrc,
                        Text
                    ));
                }
                else
                {
                    output.Write(String.Format(
                        "<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" onclick=\"javascript:{5}\" title=\"{6}\"><img src=\"{7}\" alt=\"{6}\"/>{8}</button>",
                        ClientID,
                        disabled,
                        CssClass,
                        type,
                        UniqueID,
                        click,
                        ToolTip,
                        imgsrc,
                        Text
                    ));
                }
                break;

            case ImgButtonStyle.Anchor:
                output.Write(String.Format(
                    "<a id=\"{0}\" {1}class=\"{2}\" onclick=\"javascript:{3}\" title=\"{4}\"><img src=\"{5}\" alt=\"{4}\"/>{6}</a>",
                    ID,
                    disabled,
                    CssClass,
                    click,
                    ToolTip,
                    imgsrc,
                    Text
                ));
                break;
        }
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.Write("");
    }

    #endregion
}

Вот CSS, который я использую для своих кнопок (где я помещаю «значок» в свойство кнопки CssClass):

button.icon
{
    cursor: pointer;
}

button.icon img
{
    margin: 0px;
    padding: 0px 5px 0px 5px;
    vertical-align: middle;
}

Если вы используете кнопку «Ссылка», вы можете добавить кнопку начальной загрузки, а затем добавить текст через свойство CSS «after».

LinkButton:

<asp:LinkButton id = "download" CssClass = "btn btn-primary" Text = "Download" OnCommand = "OnButtonClick" CommandName = "Download" runat = "server">
                <span aria-hidden = "true" class = "glyphicon glyphicon-download-alt"></span></asp:LinkButton>

CSS:

#MainContent_download:after{ 
content: "Download"; 
padding-left: 5px;

}

Я предпочитаю следующее решение:

                    <div style = "padding: 5px; float: left;overflow: auto;height: auto;">
                        <asp:ImageButton ID = "ImageButton2" ImageUrl = "./icons/search24.png" ToolTip = "Search"  runat = "server" />
                        <p><asp:Label ID = "Label7" runat = "server" Text = "Search"></asp:Label></p>
                    </div>

Вы можете изменить style, чтобы выровнять его по центру и т. д.