Помогите с css (background)

Потому что dispaly: block; забыли прописать для тега a.

.pages a {
	display: block;
	width: 22px;
	height: 22px;
	padding: 5px;
	font-size: 12px;
	background-color: #fff;
	color: #E01C26;
	background: url("images/w.gif") no-repeat;
}

Ну или ширина изображения больше чем 32px.

Подскажите а как еще текст вертикально выравнять?

Сейчасакие стили прописал:

.pages a {

display:block;

float:left;

vertical-align:middle;

font-size:12px;

background-color: #fff;

color:#E01C26;

background:url("images/w.gif") no-repeat; width:22px; height:22px;

}

Раз float:left; прописан, display:block; не требуется. А чтоб шрифт выровнять, поиграйтесь с line-heigth и vertical-align.

что-то пробовал по всякому - результат как на предыдущем скриншоте. ПОдскажите что не так?

Почему текст всегда к низ прижат?

.pages a {

float:left;

font-size:12px;

background-color: #fff;

color:#E01C26;

line-heigth:22px;

vertical-align:top;

background:url("images/w.gif") no-repeat; width:20px; height:20px;

}

Можно как-то так, без картинок:

.pages {

	width: 22px;

	height: 22px;

	background-color: #fff;

	border: 2px solid #cf0a04;

	border-radius: 50%;

	text-align: center;

}



.pages a {

	line-height: 22px;

	font-size: 12px;

	color: #E01C26;

	text-decoration: none;

	}



<div class="pages"><a href="http://site.ru/index.html">1</a></div>

<div class="pages"><a href="http://site.ru/index.html">2</a></div>

<div class="pages"><a href="http://site.ru/index.html">3</a></div>

<div class="pages"><a href="http://site.ru/index.html">4</a></div>

Выравнивание текста по высоте можно добиться следующим образом. Задаем родительскому элементу display: table, а блоку, в котором надо выровнить текст, - display: table-cell и свойство valign: middle, также необходимо задать конкретную высоту height.

makhno, Не обязательно table -> table-cell с типом inline-block вертикальное выравнивание тоже прекрасно работает. а display:inline-block;width:100%; в определенных случаях может быть неплохой заменой display:block;