elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  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 5,598 veces)
abmptc

Desconectado Desconectado

Mensajes: 11



Ver Perfil
Centrar un DIV y que se acople al texto
« 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.
En línea
jdc


Desconectado Desconectado

Mensajes: 3.406


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


Desconectado Desconectado

Mensajes: 854


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


Desconectado Desconectado

Mensajes: 3.406


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

Desconectado Desconectado

Mensajes: 11



Ver Perfil
Re: Centrar un DIV y que se acople al texto
« Respuesta #4 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
En línea
jdc


Desconectado Desconectado

Mensajes: 3.406


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

Desconectado Desconectado

Mensajes: 11



Ver Perfil
Re: Centrar un DIV y que se acople al texto
« Respuesta #6 en: 31 Enero 2012, 13:28 pm »
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.406


Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #7 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
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Centrar un DIV y que se acople al texto
« Respuesta #8 en: 3 Febrero 2012, 09:42 am »
Código
  1. <html>
  2. <head>
  3. 	<style type="text/css">
  4. 	body {text-align:center;}
  5. 	.midiv {
  6. 		border:3px outset;
  7. 		display:inline;
  8. 		background:#AFEEEE;
  9. 		margin:auto;
  10. 		padding:2px;
  11. 	}
  12. 	</style>
  13. </head>
  14. <body>
  15. <div class="midiv">Formulario 1</div>
  16. </body>
  17. </html>

También puedes usar un div en vez de body.

Código
  1. <html>
  2. <head>
  3. 	<style type="text/css">
  4. 	.warp {text-align:center;}
  5. 	.midiv {
  6. 		border:3px outset;
  7. 		display:inline;
  8. 		background:#AFEEEE;
  9. 		margin:auto;
  10. 		padding:2px;
  11. 	}
  12. 	</style>
  13. </head>
  14. <body>
  15. <div class="warp">
  16. 	<div class="midiv">Formulario 1</div>
  17. </div>
  18. </body>
  19. </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 am por drvy | BSM » En línea
abmptc

Desconectado Desconectado

Mensajes: 11



Ver Perfil
Re: Centrar un DIV y que se acople al texto
« Respuesta #9 en: 3 Febrero 2012, 13:55 pm »
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 1,911 Último mensaje 11 Marzo 2006, 06:36 am
por .Slasher-K.
Centrar texto en un listbox
Programación Visual Basic 		karmany 2 8,689 Último mensaje 29 Agosto 2006, 17:04 pm
por karmany
Centrar etiquetas div.
Desarrollo Web 		EAX_ 3 4,859 Último mensaje 19 Octubre 2010, 18:54 pm
por Nakp
¿Como aumentar y centrar el texto en Dev C++? ¡Ayuda!
Programación C/C++ 		JeesLooVe 0 6,223 Último mensaje 11 Mayo 2015, 19:02 pm
por JeesLooVe
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines