如何在CSS通知框中使用精灵？ （而不是单个图像）

Question

我使用的模板有通知框，如text-info，text-alert，text-tip类，它们是开头带有图标的颜色框。 我设法添加了很多不同的图标，所以为了保持我的网站快速，我希望用一个精灵替换图标。 所以我做到了。 但是......我找不到一种方法来整齐地垂直对齐盒子里面的图标...

如果我能做的话，我会把屏幕截图，但我在这里是新手...所以你必须访问这个页面看看我在说什么（请删除周围的空间，以及当你登陆页面，在文章的底部找，看起来非常相似的2个灰色通知框：

http://www.rouchenergies.fr/qui-sommes-nous/qualifications/rge-qualibois.html

上面的框是模板的css，有一个名为text-file-pdf的类。 HTML =

<p class="text-file-pdf">bla bla bla</p>

下方框是我的css，需要2个不同的类：1个用于名为“box-gris”的框，1个用于名为“file-pdf”的图标

HTML =

<p class="box-gris"><span class="file-pdf"></span>bla bla bla</p>

让我们来看看css：

模板的CSS：

.text-file-pdf {
	border-top: 2px solid #e5e5e5;
	border-bottom: 2px solid #e5e5e5;
	background: #f2f2f2 url(../../../images/small-n-flat-master/file-pdf.png) no-repeat;
}
.text-file-pdf {
	background-position: left center;
	padding: 0.8em 0.8em 0.8em 5em;
	min-height: 20px;
}

我自己的CSS：

.box-gris {
	border-top: 2px solid #e5e5e5;
	border-bottom: 2px solid #e5e5e5;
	background-color: #f2f2f2;
}

.box-gris {
	padding: 0.8em 0.8em 0.8em 5em;
	min-height: 20px;
}

.file-pdf {
	display: inline-block;
	background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
	background-repeat: no-repeat;
	width: 60px;
	height: 24px;
	float: left;
	margin-left: -5em;
	vertical-align: middle;
}
.file-pdf {
	background-position: 0 -1080px;
}

我想知道为什么垂直对齐：中间;不起作用......和/或我应该做什么而不是这个？

欢迎任何帮助;）