Спрайт проблема с выравниванием изображения?

Question

Я отобразил одно из изображений спрайта в теге span.Интервал находится внутри какого-то другого элемента, например <div>, <li>, <p>.Родительские элементы диапазона, выравнивание текста по центру.

Текстовое содержимое родительских элементов выровнено по центру.Но я не могу сделать промежуток со спрайтом в центре.

Здесь я добавил пример кода.

HTML-разметка:

<div align="center"><span class="cameraIcon spriteImage"></span>Some Text Content</div>

Стиль

span.cameraIcon {
background-position: -240px 0;
width: 24px;
height: 24px;
position: absolute
}

Любые предложения будут благодарны.

Спасибо!

Answer 1

При использовании абсолютного позиционирования тег span больше не является частью текстового потока внутри элемента div, поэтому на него не влияет выравнивание текста.

Вы можете использовать стиль display: inline-block;сделать элемент span блочным элементом, который все еще является частью текстового потока.(Однако некоторые старые браузеры не поддерживают это отображаемое значение.)

Answer 2

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

HTML:

<div class="cameraIcon spriteImage">Some Text Content</div>

CSS:

.cameraIcon {
    background-position: -240px center;
}