Hola,
Mi intención es conseguir hacer con un DIV lo mismo que hago con esta tabla:
<table style="background-color:#AFEEEE;
margin:0 auto 0 auto;
border-width: medium; border-style: outset;">
<tr>
<td align="center"">
Formulario 1
</td>
</tr>
</table>
Es decir, quiero una caja, CENTRADA, y que a la vez se ADAPTE AL CONTENIDO, no quiero poner width, quiero que automáticamente coja el tamaño del texto que tenga dentro. Esto último lo he conseguido poniendo display: inline, pero si pongo eso no soy capaz de centrar la caja.
¿Alguna idea?
Muchas gracias de antemano y un saludo.
De la misma forma que estas centrando la tabla centras el div
yo he hecho lo mismo que tu con width auto...saludos
Trata poniendo el ancho del div con porcentaje.
Hola,
He probado poniendo widt:auto; pero no funciona, la caja del div ocupa todo el ancho de la página.
También habéis comentado que poniendo el width con un porcentaje funcionaría. Es cierto que la caja ocupa el porcentaje de la página que le pongas, pero lo que yo pretendo es que se adapte al tamaño del texto que tiene dentro del div
¿Alguna otra idea?
Saludos
Texto con font-size con porcentaje también?
No entiendo lo que me sugieres, me los puedes explicar un poco más por favor.
Saludos.
Haz una prueba haciendo un div con width:50%; y font-size:300%; luego cuando lo veas en el navegador agranda y achica la ventana, en la teoría debería funcionar
<html>
<head>
<style type="text/css">
body {text-align:center;}
.midiv {
border:3px outset;
display:inline;
background:#AFEEEE;
margin:auto;
padding:2px;
}
</style>
</head>
<body>
<div class="midiv">Formulario 1</div>
</body>
</html>
También puedes usar un div en vez de body.
<html>
<head>
<style type="text/css">
.warp {text-align:center;}
.midiv {
border:3px outset;
display:inline;
background:#AFEEEE;
margin:auto;
padding:2px;
}
</style>
</head>
<body>
<div class="warp">
<div class="midiv">Formulario 1</div>
</div>
</body>
</html>
Resultado:
(http://i.elhacker.net/i?i=9n-SjgVseVCTxPHRnNe5j2Vo) (http://i.elhacker.net/d?i=9n-SjgVseVCTxPHRnNe5j2Vo)
Edit: En la imagen sale "display:inline-block;", pero se me olvido que IE se pasa por el *** el "block" y la caga haciendo que el div ocupe el 100%. Así que usa solo inline.
Saludos
Muchas gracias drvy | BSM
Los dos ejemplos que me has puesto funcionan perfectamente ;-)
Un saludo.