与文本内联的按钮图像答案

【问题标题】：Button image inline with text与文本内联的按钮图像
【发布时间】：2015-11-04 05:51:38
【问题描述】：

我有一个按钮，其中包含说明单击事件的文本和图像。我知道在按钮上显示图像作为背景是可行的。

CSS：

    .upperLeftButton {
        display: inline-block;
        background-image:url(Images/checkmark.png);
        height:50px;
        width:200px;
    }

HTML：

<asp:Button ID="checkInButton" runat="server" Text="Check In"  OnClick="checkInButton_Click"/>

有什么方法可以在按钮内并排显示图片和文字？

【问题讨论】：

是的...使用background-position 但这取决于您想要的外观...如果没有实际图像我们无法判断。

标签： html css asp.net

【解决方案1】：

在`button` 内添加`img` 标签

因为the button element can contain inner HTML content，您可以使用img 标签来替代在CSS 中设置background-image。

img {
  margin-right: 5px;
  vertical-align: middle;
}
button {
  padding: 5px;
}

<button type="button">
  <img src="http://placehold.it/30" alt="Place Holder" />
  My cool button
</button>

【讨论】：

投反对票，我不会讨厌；请发表评论，以便我知道这个答案有什么问题——所以一切都是为了改进。根据SO Help 的说法，“对帖子投反对票意味着……帖子包含错误信息、研究不足或未能传达信息。”你能解释一下吗？
嗯，它确实回答了这个问题，这正是我想要的，所以谢谢 gfullam。

【解决方案2】：

另一个想法是重新设计（即使是简单的油漆）背景并为文本添加“空白”空间并用css将其放置在那里。

.button{
background-image: url('http://community.avid.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.53.19.51/WhiteBlack10801440x1080.png');
background-size: cover;
width: 200px;
height: 50px;
text-align: left;
padding-left: 32px;}

就像这里的小提琴：

https://jsfiddle.net/pp719t5n/

黑色空间是您的图像和文本的白色空间背景。

【讨论】：

【解决方案3】：

是的...使用 background-position 但这取决于您想要的外观...如果没有实际图像，我们无法判断。

快速演示...

  .upperLeftButton {
    display: inline-block;
    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);
    background-repeat: no-repeat;
    background-position: center left 25px;
    height: 50px;
    width: 200px;
  }

&lt;button class="upperLeftButton"&gt;Check&lt;/button&gt;

【讨论】：

这正是我所追求的。谢谢！

【解决方案4】：

将padding-left: 30px（或checkmark.png的任何宽度）和background: url(images/checkmark.png) top left no-repeat添加到按钮CSS，这样它会偏移文本，但将图标留在左角。

编辑：另外，您可能还应该添加 padding-top: 10px （左右），因此文本也垂直居中在图标中间。

【讨论】：

在button 内添加img 标签

在`button` 内添加`img` 标签