CSS - Float Left and Anchor Element -

I have an anchor element that uses CSS class, basically to replace text with an image . I know it sounds weird However, the end result looks correct (for the most part)

.tool link {Overflow: hidden; } .toolEdit {float: left; Background: url (/resources/images/edit.png) no-repeat; Width: 15px; Height: 15px; }

My anchor element looks like this:

  & lt; A href = "#" class = "toolEdit" & gt; Edit & lt; / A & gt;  

When the "float: left" statement is included, then everything looks fine. However, when I remove the "float: left" statement, the word "edit" appears and the image shrinks. I need to remove the float: left because I need to focus the contents in a table column. But as float: on the left side, the content aligns to the left. What should I do?

This should work ...

Your CSS

  .toolEdit {display: block; Background: url (/resources/images/edit.png) no-repeat; Width: 15px; Height: 15px; Text-decoration: none; } .toledit span {visibility: hidden; }  

You can extract overflow: even hidden style ... is not necessary ...

Your HTML

  & lt; A href = "#" class = "toolEdit" & gt; & Lt; Span & gt; Edit & lt; / Span & gt; & Lt; / A & gt;