CSS - 浮动左和锚元素

Question

我有一个锚点元素，它使用css类基本上用图像替换文本。我知道这听起来很奇怪。但是，最终的结果看起来是正确的（大部分）。

.toolLink a { 
    overflow:hidden;  
} 
.toolEdit 
{ 
    float:left; 
    background:url(/resources/images/edit.png) no-repeat; 
    width: 15px; 
    height: 15px; 
} 

我的锚元素看起来是这样的：

<a href="#" class="toolEdit">edit</a> 

当 “浮动：左” 声明包含，一切看起来是正确的。但是，当我删除“float：left”语句时，会出现单词“编辑”并缩小图像。我需要删除float：left，因为我需要将内容居中放在表格的列中。但只要float：left在那里，内容就会对齐左边。我该怎么办？

Answer 1

这应该工作...

你的CSS

.toolEdit 
{ 
    display:block; 
    background:url(/resources/images/edit.png) no-repeat; 
    width: 15px; 
    height: 15px; 
    text-decoration:none; 
} 

.toolEdit span 
{ 
    visibility:hidden; 
} 

您可以删除溢出：太...没有必要隐藏风格...

你HTML

<a href="#" class="toolEdit"><span>edit</span></a> 

Answer 2

锚是内联元素。尝试添加显示：块到您的.toolEdit类。

您可能也会考虑使用div而不是锚点，因为锚点不会去任何地方，也不会有名称或任何其他锚点目的。

编辑：

无论哪种方式，“编辑”应该显示，除非你使用一些JavaScript将其删除。在这种情况下，我建议使用图片替换“编辑”文本，而不是使用背景图片。