elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.
 
Inicio Ayuda Buscar Ingresar Registrarse
26 Mayo 2012, 15:28  


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales

+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  Centrar un DIV y que se acople al texto		 0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Centrar un DIV y que se acople al texto  (Leído 826 veces)
abmptc

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Centrar un DIV y que se acople al texto
« en: 26 Enero 2012, 12:21 »
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.
En línea
jdc


Desconectado Desconectado

Mensajes: 3.253


janito dos cuatro...


Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #1 en: 26 Enero 2012, 13:04 »
De la misma forma que estas centrando la tabla centras el div
En línea
Mini_Nauta


Desconectado Desconectado

Mensajes: 627



Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #2 en: 26 Enero 2012, 18:35 »
yo he hecho lo mismo que tu con width auto...saludos
En línea

Visita mi Blog de películas, artículos, ocio y mucho mas...
Películas, Animé y Series
"Si te pones a pensar en hacer algo, nunca lo vas a hacer. Hacer sin pensar, en este caso, es una decisión inteligente."
jdc


Desconectado Desconectado

Mensajes: 3.253


janito dos cuatro...


Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #3 en: 26 Enero 2012, 20:23 »
Trata poniendo el ancho del div con porcentaje.
En línea
abmptc

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: Centrar un DIV y que se acople al texto
« Respuesta #4 en: 27 Enero 2012, 09:58 »
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
En línea
jdc


Desconectado Desconectado

Mensajes: 3.253


janito dos cuatro...


Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #5 en: 27 Enero 2012, 11:40 »
Texto con font-size con porcentaje también?
En línea
abmptc

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: Centrar un DIV y que se acople al texto
« Respuesta #6 en: 31 Enero 2012, 13:28 »
No entiendo lo que me sugieres, me los puedes explicar un poco más por favor.

Saludos.
En línea
jdc


Desconectado Desconectado

Mensajes: 3.253


janito dos cuatro...


Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #7 en: 3 Febrero 2012, 05:57 »
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
En línea
drvy | BSM


Desconectado Desconectado

Mensajes: 1.129


badstupidmonkey


Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #8 en: 3 Febrero 2012, 09:42 »
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:


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
« Última modificación: 3 Febrero 2012, 09:50 por drvy | BSM » En línea
abmptc

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: Centrar un DIV y que se acople al texto
« Respuesta #9 en: 3 Febrero 2012, 13:55 »
Muchas gracias drvy | BSM

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

Un saludo.
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Centrar texto manualmente
Programación Visual Basic 		erick185 1 306 Último mensaje 11 Marzo 2006, 06:36
por .Slasher-K.
Centrar texto en un listbox
Programación Visual Basic 		karmany 2 1,393 Último mensaje 29 Agosto 2006, 17:04
por karmany
centrar div css
Desarrollo Web 		[ Alberto] 9 705 Último mensaje 14 Octubre 2006, 00:32
por le_roi
centrar texto consola [en linux]
Programación C/C++ 		oPen syLar 4 971 Último mensaje 18 Agosto 2007, 01:07
por Ragnarok
Centrar etiquetas div.
Desarrollo Web 		EAX_ 3 1,989 Último mensaje 19 Octubre 2010, 18:54
por Nakp
Powered by SMF 1.1.16 | SMF © 2006-2008, Simple Machines