Imprimir Página - Centrar un DIV y que se acople al texto

Título: Centrar un DIV y que se acople al texto
Publicado por: abmptc en 26 Enero 2012, 12:21 pm

Hola,

Mi intención es conseguir hacer con un DIV lo mismo que hago con esta tabla:

Código:

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

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: jdc en 26 Enero 2012, 13:04 pm

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

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: flacc en 26 Enero 2012, 18:35 pm

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

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: jdc en 26 Enero 2012, 20:23 pm

Trata poniendo el ancho del div con porcentaje.

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: abmptc en 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

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: jdc en 27 Enero 2012, 11:40 am

Texto con font-size con porcentaje también?

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: abmptc en 31 Enero 2012, 13:28 pm

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

Saludos.

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: jdc en 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

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: #!drvy en 3 Febrero 2012, 09:42 am

Código

<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

<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

Título: Re: Centrar un DIV y que se acople al texto
Publicado por: abmptc en 3 Febrero 2012, 13:55 pm

Muchas gracias drvy | BSM

Los dos ejemplos que me has puesto funcionan perfectamente ;-)

Un saludo.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: abmptc en 26 Enero 2012, 12:21 pm