如何创建带有图标和按钮描述文本的链接按钮答案

【问题标题】：How to create a link button with a icon and button description text如何创建带有图标和按钮描述文本的链接按钮
【发布时间】：2013-11-14 16:06:46
【问题描述】：

您好，我正在尝试创建一个链接按钮，其中包含位于图标旁边的图标和按钮描述文本。我在“A”标签内添加了填充，以便文本始终垂直居中，但是我尝试添加 img，它现在将文本向下推并在此过程中增加了按钮的大小。有什么想法我哪里出错了吗？

我想让这些按钮响应较小的设备。我可以调整按钮大小，但它的文本和图标定位是问题，因为我希望它们始终水平和垂直居中。有没有一种简单的方法来创建带有图标和文本的链接按钮，我到处都看过，但收效甚微。任何教程/建议将不胜感激。请参阅下面的代码。谢谢。

HTML：

<div id="reports_menu_wrapper">

    <div id="reports_menu_content">
        <a href="#" title="Product Charts"><span><img src="imgs/main_products.png" alt="" /></span>Product Charts</a>
        <a href="#" title="Speed Charts">Speed Charts</a>
        <a href="#" title="Financial Charts">Financial Charts</a>
        <a href="#" title="Usage Charts" id="usage">Usage Charts</a>
        <br class="clearFloat"/>
    </div>

CSS：

#reports_menu_wrapper 
{
width:100%;
height:auto;
background-color:pink;
margin-top:30px;
}

#reports_menu_content
{
width:824px;
height:auto;
margin:0 auto;
background-color:#fff;
padding:10px;
border:solid 1px #ccc;
}

#reports_menu_content a 
{
display:block;
float:left;
width:198.5px;
background-color:#eee;
padding:18px 0;
outline:solid 1px #ccc;
margin-right:10px;
text-transform:uppercase;
font-size:75%;
color:#333;
}

#reports_menu_content a:hover 
{
background-color:#e6e6e6;
}

#reports_menu_content #usage 
{
margin-right:0;
}


#reports_menu_content a img 
{
margin-right:10px;
}

【问题讨论】：

为图标使用背景图片，使用将更难获得正确的位置。在彼此上方制作 2 个 div 标签，第一个 div 包含背景颜色，第二个需要背景图像：不再重复。将文本放在第二个 div 中并给它一个左边的填充

标签： html css button hyperlink

【解决方案1】：

您需要为您的a 标记一个background-image 并管理填充：

#reports_menu_content a 
  {
   background:orange url('yourimage.png') no-repeat left center;
   padding:0 20px 0 42px; /*42 is equal to the padding left = the image size+10px*/
  }

还可以将vertical您的文字居中

line-height:40px;

现在，如果您希望每个按钮有不同的图标，您可以使用 Sprite。

检查这个http://jsfiddle.net/Px2zu/8/

【讨论】：

您好，感谢您回复我。我使用了您推荐的方法，并且效果很好（谢谢:)）唯一奇怪的是当我添加 10px 以便图标和按钮之间有一个很好的间隙时，在 android 手机和平板电脑上测试它时图标会消失.在任何苹果设备上都能正常工作。如果我忽略 10 像素的间隙，图标会出现在所有设备上。图标为 .png 格式。有任何想法吗？再次感谢。背景：url（imgs/main_products.png）不重复中心左10px；
您的代码无效，如果您删除 left 并只说 center 10px，则您的代码无效中心向左 10px 是多余的，那么它可以工作---试着告诉我发生了什么
嗨，不幸的是它没有工作，它将图标中心水平移动，距离顶部 10px。虽然我可以在所有 android 和 iphone 设备上看到该图标
哦，所以只需更改顺序...10px center

【解决方案2】：

您可以使用 css 属性 vertical-align 将一个元素垂直居中到另一个元素。但请记住，此元素必须是内联元素。在您的情况下，您必须将此属性的值 middle 应用于您的 img 元素，因为您希望它们垂直居中于您的文本。

a img {
  vertical-align: middle;
}

我个人更喜欢使用line-height 来垂直居中文本节点而不是padding。但无论哪种方式都可以。

不过，我建议您使用 css 类来创建图标和按钮。 .bt 类应用基本按钮样式，例如大小、边框、边距等。.ico 类用于设置图标的偏移量，该偏移量将通过使用另一个类来应用。此类将以图标命名并设置background 属性。因此，如果您的图标显示一个箭头，您可能会将其命名为.arrow。顺便说一句，当浮动inline元素时，它会自动呈现为block元素，所以不需要display属性。

.bt {
    padding: 0 15px;
    float: left;
    border: 1px solid #ccc;
    font: 12px/36px Arial, "sans-serif";
    color: #000;
    text-decoration: none;
}

.bt.ico {
    padding-left: 41px;
}

.ico.arrow {
    background: url("https://cdn0.iconfinder.com/data/icons/entypo/58/under1-16.png") 15px center no-repeat;
}

我还注意到您使用了一个额外的节点来清除浮动。据我所知，为此目的使用额外标记不是一个好习惯，因为它不包含数据。更好的做法是使用伪元素。应用于包装器#reports_menu_content 的:after 伪元素将清除浮动：

.clear:after {
  display: block;
  content: '';
  clear: both;
}

同样，为它使用一个类，以便它也可以应用于其他包装器。

我准备了一个小小提琴来演示上述几点：http://jsfiddle.net/w33Vk/5/

【讨论】：