Question

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

Answer 1

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

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

Answer 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;
}

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

#reports_menu_content

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

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

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

2 个答案: