Это вызвано тем, что ваши якоря имеют верхнюю прокладку, равную высоте, которую вы хотите, чтобы крошки имели. Я удалил эту прокладку, дал элемент сдерживающего списка height:30px;
, дал якорям line-height:30px;
Таким образом, они остаются вертикально центрированными.
#crumbs ul li {
display: inline-block;
height:30px;
}
#crumbs ul li a { /* The block part of each breadcrumb; the text in each breadcrumb */
display: block;
line-height:30px;
background: #327098;
/*text-align: center; */
padding: 0 10px 0 80px; /* size of each breadcrumb */
position: relative;
margin: 0 5px 0 0;
font-size: 16px;
text-decoration: none;
color: #000000;
}
Редактировать
Я не уверен, что вы имеете в виду под ними, существующим отдельно. Я только что скопировал код, который вы предоставили в скрипку и запустили его. И я увидел очевидную проблему, и я сделал то, что мог. Вот проблема, которую я видел. http://jsfiddle.net/zh6bw/