CSS - Float Left и Anchor Element

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», появляется слово «edit» и изображение сокращается. Мне нужно удалить 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

Якоря являются встроенными элементами. Попробуйте добавить display: block в ваш класс .toolEdit.

Вы можете также рассмотреть div вместо якоря, так как якорь никуда не уходит, не имеет имени или каких-либо других целей якоря.

редактирование:

В любом случае «Edit» должно отображаться, если вы не используете какой-либо JavaScript для его удаления. В этом случае я бы посоветовал поменять текст «Редактировать» на изображение, а не на фоновое изображение.