3

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

2 回答 2

2

您需要的是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/

于 2013-11-14T16:46:41.490 回答
0

您可以使用 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应用于包装器的伪元素将清除浮动：#reports_menu_content

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

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

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

于 2013-11-14T18:58:36.200 回答