2013-11-02 2 views
0

Я использую следующий код, чтобы установить значок якоря:Фонового изображения в виде значка якоря - позиционирование слева от текста

.iconed{ 
    padding-left:22px; 
    background-position: 3px center; 
    background-repeat: no-repeat; 
} 

.iconed.selected{ 
    background-image:url(images/selected.png); 
} 

<a href="#" class="iconed selected">Some link</a> 

Это прекрасно работает, когда якорь имеет ширину авто или/и выравнивание текста устанавливается слева , Есть ли способ сделать этот значок отображаемым -5px из текста, когда ширина привязки установлена ​​на 100%, а выравнивание текста - в центре? Я не хотел бы использовать: перед классом псевдо, но если нет другого пути ...

должен работать на IE9 +

Обертывание с другим элементом не является решением

ответ

0

Я думаю, что псевдо-элементы могут быть вашим единственным вариантом. http://jsfiddle.net/2rRDE/

Первый из них будет нажимать текст справа, поскольку он является частью обычного потока документов.

Второй, похоже, что это не так, но я применил только относительное позиционирование и отрицательные поля, чтобы вытащить текст обратно в точный центр.

a { 
     display:block; 
     width:200px; 
     border:1px solid orange; 
     text-align:center; 
    } 

    .a1:before { 
     content:"☺"; 
    } 

    .a2:before { 
     content:"☺"; 
     position:relative; 
     left:-15px; 
     margin-right:-15px; 
     width:15px; 
     display:inline-block; 
    } 

Edit: Ответ на комментарий

Ваш оригинальный пост никогда не упоминается требование выравнивания по вертикали. Но здесь есть модифицированная версия, которая является минимальным и использует фактическое изображение. http://jsfiddle.net/2rRDE/1/

a { 
    display:block; 
    width:100%; 
    border:1px solid orange; 
    text-align:center; 
    line-height:50px; 
} 


a:before { 
    content:url("http://benjinyap.com/system/asset.png"); 
    display:inline-block; 
    margin-right:5px; 
} 

Вы не можете установить псевдо в блок элемента. Значок должен соответствовать вертикальной позиции текста. Но если вы хотите, чтобы он был центрирован независимо от высоты линии/высоты/заполнения якоря, тогда у меня нет ответа на этот вопрос в данный момент.

+0

Не знаете, как использовать его со значком изображения, разделенным на разные однострочные css, где определяется файл изображения. –

+0

'.iconed: before { \t дисплей: блок; \t ширина: 22px; \t высота: 100%; \t фон: красный; \t левый: -22px; } 'не работает вообще ... no red square ... –

+0

Я считаю, что вам нужно установить свойство контента для псевдоэлементов, даже если это просто пустые кавычки. – TreeTree

Смежные вопросы