H1 com imagens lateraise uma central

[Ricardo.RFS 0]

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:

 

 

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.

[Ricardo.RFS 0]

alguem ai da uma ideia de como faria, pelo menos pra mim testa hehhehe

[Ricardo.RFS 0]

Achei a solução...

 

voltar ao passado... TABELASSSSS

 

h1 {	height: 41px;	line-height: 41px;	text-align: center;	margin-bottom: 20px;}table.titulos,table.titulos td {	height: 41px;}table.titulos td.ini	{	background: url("../img/h1_ini.png") no-repeat;	width: 24px;}table.titulos td.meio {	background: url("../img/h1_meio.png");	color: #003a81;	font-weight: bold;	font-size: 18px;	text-align: center;}table.titulos td.fim {	background: url("../img/h1_fim.png") no-repeat;	width: 23px;}

<?phpfunction titulos($titulo) {			echo '		<h1>		<table class="titulos" border="0" cellspacing="0" cellpadding="0">		  <tr>			<td class="ini"> </td>			<td class="meio">'.$titulo.'</td>			<td class="fim"> </td>		  </tr>		</table>		</h1>	';	}?>

<? titulos('TESTE'); ?>

é isso ai, nunca achei que precisaria fazer isso, mas...