div de ancho variable y centrado horizontalmente

[loki_gz]

Muy buenas,

Llevo días buscando y rebuscando. Probando código y leyendo en un montón de lugares y, a pesar de que he aprendido mucho acerca de este nuevo mundo que es para mi el de los "divs", no encuentro una solución válida para lo que busco.

Tal como he descrito en el título, lo que necesito es un div que varíe de ancho según el contenido que tenga y que además esté centrado con respecto a otro div en el que se encuentra y que tiene ancho fijo.

Os cuelgo el código (simplificado para un mejor entendimiento) del que parto.

Código HTML:

.titulo {
	display: table-cell;
	border: 1px solid #000000;
	border-radius: 10px 10px;
	-moz-border-radius: 10px 10px;  /* Firefox */
	-webkit-border-radius: 10px 10px;  /* Safari */
	-ms-border-radius: 10px 10px;  /* IExplorer 8 */
	-khtml-border-radius: 10px 10px;  /* Konqueror */
	padding: 0 4px 0 4px;
}
.titulo p {
	color: #000;
	font-size: 8pt;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin:1px 0 1px 0;
}

.panel_sombra {
        width: 700px;
	margin: 0 auto;
	text-align: center;
	margin-top: 6px;
	background-color: #f5dd3f;
	border-radius: 10px 10px;
	-moz-border-radius: 10px 10px;  /* Firefox */
	-webkit-border-radius: 10px 10px;  /* Safari */
	box-shadow: black 0em 0em 0.3em;
	-moz-box-shadow: black 0em 0em 0.3em;
	-webkit-box-shadow: black 0em 0em 0.3em;
	padding: 10px 10px 10px 10px;
}

Código HTML:

<div id="panel_sombra" class="panel_sombra">
     <div id="titulo" class="titulo"><p>titulo del documento</p></div> <!-- Este es el div que necesito centrar horizontalmente. Además sólo quiero que tenga de ancho lo que ocupe su contenido, que podrá variar -->
</div> 

Tal como presento el código, este me aparece con el ancho específico del texto que hay dentro del div, pero alineado a la izquierda.

Como observaréis, estoy trabajando con código específico de CSS3, como el border-radius o el box-shadow. Supongo que eso no influirá en el resultado de lo que estoy buscando.

Espero vuestras aportaciones como agua de mayo.

Muchas gracias por anticipado

[IsaBelM]

prueba con esto

.titulo {
display: table;
margin: 0 auto;
border: 1px solid #000000;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px; /* Firefox */
-webkit-border-radius: 10px 10px; /* Safari */
-ms-border-radius: 10px 10px; /* IExplorer 8 */
-khtml-border-radius: 10px 10px; /* Konqueror */
padding: 0 4px 0 4px;

}





.titulo p {
width: auto;
color: #000;
font-size: 8pt;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}

[loki_gz]

Oleeee!

¡A la primera! ¡Qué fácil parece cuando te abren los ojos!

Agradezco mucho tu ayuda, de verdad. Llevaba días rompiéndome la cabeza con esta chorrada.

Sólo espero que este post sirva a más gente que tenga esta misma duda.

Muchas gracias