Allineamento immagini e testo in un div

[theboss280489]

Salve a tutti,
ho un problema di allineamento in un div cosi definito :

#barra_sup {
	line-height: 15px;
	margin-left:10px;
	background-color: rgba(250, 217, 8, 0.6);
	width:490px;
	height:30px;
	line-height: 30px;
	border-radius: 20px;
	padding-left:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	font-weight:bold;
	position:relative;
}

Se inserisco del testo in questo div mi viene perfettamente allineato verticalmente.
Vorrei anche inserire delle immagini con dimensione 26px x 26px e vorrei che anche queste fossero centrate verticalmente.
Ho creato un altro stile per il div delle immagini:

width:26px;
height:26px;
margin-top:2px;
position:absolute;
display:inline;

L'immagine ora viene centrata verticalmente ma il testo è coperto dalla stessa.
E' questo il modo corretto per fare una barra del genere (riportata in foto) o sbaglio concettualmente? Come è possibile procedere in modo piu pulito eventualmente?
Come mai il testo è sotto le immagini?