Блог

Главная - Вопросы по программированию - Как бы я добавил margin-top только к части изображения в промежутке?

Как бы я добавил margin-top только к части изображения в промежутке?

#html #css

#HTML #css

Вопрос:

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

В настоящее время: в настоящее время

Желаемый результат: желаемый результат

css:

 .sapphire-member { 
    color: #0033ff;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
}
.sapphire-member:before {
    content: url(https://puu.sh/D9zBw/ca0f811bca.png);
}

HTML:

 <span class='sapphire-member'>Test</span>

текущий HTML-код для желаемого результата с тегом img:

 <img src="https://puu.sh/D9zBw/ca0f811bca.png" /><span class='sapphire-member'>

Итак, в основном я хочу знать, возможно ли получить желаемый результат без использования тега img?

Комментарии:

1. вы играли с выравниванием по вертикали? .. это должно достичь того, чего вы хотите

2. jsfiddle.net/sfLajuqr

Ответ №1:

vertical-align вероятно, это то, что вам нужно. Вы хотите избежать жестко заданных значений, таких margin-top как вертикальное центрирование, потому что что, если размер шрифта или какое-либо другое расположение изменится? Я бы предложил:

 <span class='sapphire-member'>Test</span>
  
 .sapphire-member { 
    color: #0033ff;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
    vertical-align: middle;
}
.sapphire-member:before {
    content: url(https://puu.sh/D9zBw/ca0f811bca.png);
    margin-right: 5px;
    vertical-align: inherit;
}

тестовое изображение

https://codepen.io/anon/pen/YMwGXN