Centrar un DIV y que se acople al texto

abmptc · 26 Enero 2012, 12:21 PM

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.

jdc · 26 Enero 2012, 13:04 PM

De la misma forma que estas centrando la tabla centras el div

flacc · 26 Enero 2012, 18:35 PM

yo he hecho lo mismo que tu con width auto...saludos

jdc · 26 Enero 2012, 20:23 PM

Trata poniendo el ancho del div con porcentaje.

abmptc · 27 Enero 2012, 09:58 AM

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

jdc · 27 Enero 2012, 11:40 AM

Texto con font-size con porcentaje también?

abmptc · 31 Enero 2012, 13:28 PM

No entiendo lo que me sugieres, me los puedes explicar un poco más por favor.

Saludos.

jdc · 3 Febrero 2012, 05:57 AM

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

#!drvy · 3 Febrero 2012, 09:42 AM

Código (css) [Seleccionar]

<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.

Código (css) [Seleccionar]

<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:

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

abmptc · 3 Febrero 2012, 13:55 PM

Muchas gracias drvy | BSM

Los dos ejemplos que me has puesto funcionan perfectamente

Un saludo.