Центрировать фоновое изображение из спрайта

У меня есть меню следующим образом:

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Long Item</a></li>
  <li><a href="#">Very very short Item</a></li>
  <li><a href="#">Another Item</a></li>
  <li><a href="#">Last Item</a></li>
</ul>

Я хотел бы использовать изображение спрайта в качестве фона в CSS. Я бы хотел, чтобы изображение было отцентрировано в пунктах меню различной ширины. В настоящее время для первого элемента правильный CSS это:

background: url(images/sprite.png) no-repeat -20px -10px;

Для второго:

background: url(images/sprite.png) no-repeat -24px -10px;

Для третьего:

background: url(images/sprite.png) no-repeat -32px -10px;

И так далее. Я не знаю точную ширину каждого элемента, и она может измениться в любой момент.

У меня есть доступ к структуре HTML, поэтому я могу добавить некоторые теги, если это необходимо. Можно ли центрировать фоновое изображение в этом случае?

2 ответа

Решение

JSFiddle demo.

По сути, вы создаете псевдоэлемент, используйте position: absolute а также left:50% центрировать это.

li a { position: relative;} /* makes the (position:absolute) below work */
li a:after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%; /* centers the left edge of the sprite */
    margin-left: -8.5px; /* this centers the actual sprite--this is half the sprite-window width. if you don't do this, the left edge will be centered instead of the center of the sprite.  */
    width: 15px; /* set window to see sprite through */
    height: 18px; /* set window to see sprite through */
    background: url(https://www.google.com/images/nav_logo129.png) no-repeat -15px -327px; /*  set up the sprite. Obviously change this fto make each one different. */

}

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

li a {
    background-image: url(images/sprite.png); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

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

li a {
    background-image: url(images/sprite.png); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

Если ваш спрайт-лист компактен или вы не пытаетесь центрировать фоновое изображение в одном из вышеупомянутых сценариев, эти решения не применяются.

Другие вопросы по тегам