如何创建带有图标和按钮说明文本的链接按钮

嗨，我正在尝试创建一个链接按钮，图标旁边有一个图标和按钮描述文本。我在"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;
}

您需要的是

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;

现在，如果你想为每个按钮使用不同的图标，你可以使用精灵。

检查此 http://jsfiddle.net/Px2zu/8/

可以使用

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具有以下 css 属性的:after伪元素将清除浮点数：

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

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

相关内容

最新更新

热门标签：