H1 com imagens lateraise uma central

Pessoall,

Meu problema é o seguinte, tenho que fazer títulos para as páginas e sub-titulos que utilizem um estilo que ilustro com a imagem abaixo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.floriano.ppg.br/h1_teste.jpg&key=3f18194d27215d0f695f6a0b356336df8791597e0b31e47b15f8baeae4c18263" alt="Imagem Postada" />

Problemas:

- Os títulos possuem tamanhos diferentes de largura (Dependendo do texto).

- Os títulos tem que ser texto pois o cliente pode mudar o titulo.

- Preciso utiliza PNG devido ao fundo com sombra, sendo assim preciso usa em background para poder utilizar uns hacks que não sejam JS, já que o fundo nem sempre tem a mesma cor.

- Eles precisam estar centralizados a uma div, sem largura fixa.

- Tem que estar centralizado verticalmente.

Estou a mais de uma semana quebrando a cabeça com esta porcaria. consegui fazer com três DIVs usando float:left, mas não consegui centralizado o "bloco" dos 3 DIVs ou SPAN ao centro do H1.

CSS

h1 { height: 41px; line-height: 35px; color: #002c78; text-align: center;}.h1_div { display: block; margin: 0px auto; height: 41px; text-align: center; clear: both;}.h1_meio { float: left; height: 41px; color: #002c78; line-height: 35px; font-weight: bold; background: url("../img/h1_meio.png");}.h1_ini { display: inline; float: left; width: 24px; height: 41px; background: url("../img/h1_ini.png") no-repeat;}.h1_fim { float: left; width: 23px; height: 41px; background: url("../img/h1_fim.png") no-repeat;}
HTML

<h1><div class="h1_div"><span class="h1_ini"> </span><span class="h1_meio">Titulo teste</span><span class="h1_fim"> </span></div></h1>os hacks do png estão num outro css que so importa quando o IE for inferior ao 7.