Как выровнять спрайт по центру?

539

09 февраля 2017, 01:20

Есть три круга, в этих трех кругах будет размещен спрайт(несколько иконок). Как их выровнять? если bg-position уже отведен под спрайт. И с размерами под иконки, выходит переопределение.

html, 
body { 
	margin: 0; 
	padding: 0; 
} 
 
.circle { 
	width: 450px; 
	margin: 0 auto; 
} 
 
.circle-img { 
	display: inline-block; 
	width: 60px; 
	height: 60px; 
	border-radius: 50%; 
	background-color: yellow; 
	/*background: url(img/sprites.png) no-repeat;*/ 
} 
 
.green { 
	/*width: 15px; 
	height: 15px;*/ 
	background-color: green; 
	background-position: 0 15px; 
} 
 
.red { 
	/*width: 15px; 
	height: 15px;*/ 
	background-color: red; 
	background-position: 0 30px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Test</title> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<div class="circle"> 
		<a href="#" class="circle-img yellow"></a> 
		<a href="#" class="circle-img green"></a> 
		<a href="#" class="circle-img red"></a> 
	</div> 
	 
</body> 
</html>

Answer 1

Используйте псевдоэлементы для позиционирования иконок спрайта

html, 
body { 
    margin: 0; 
    padding: 0; 
} 
 
.circle { 
    width: 450px; 
    margin: 0 auto; 
} 
 
.circle-img { 
    position: relative; 
    display: inline-block; 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    background-color: yellow;    
} 
.circle-img:before{ 
    content: ''; 
    position: absolute; top: 50%; left: 50%; 
    margin: -7.5px 0 0 -7.5px; 
    background-image: url(img/sprites.png); 
    background-repeat: no-repeat; 
    width: 15px; 
    height: 15px; 
} 
.circle-img.yellow:before {     
    background-color: orange; 
    background-position: 0 0; 
} 
.circle-img.green:before {     
    background-color: green; 
    background-position: 0 15px; 
} 
.circle-img.red:before {     
    background-color: red; 
    background-position: 0 30px; 
}

<div class="circle"> 
    <a href="#" class="circle-img yellow"></a> 
    <a href="#" class="circle-img green"></a> 
    <a href="#" class="circle-img red"></a> 
</div>

Answer 2

Указывайте вместо background: url(img/sprites.png) no-repeat; свойство background-image: url('../img/sprites.png'); и background-repeat: no-repeat;