Centrar un DIV y que se acople al texto

Citar

Escrito el 26 Ene 2012 11:13 am

Hola,

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

Código HTML :

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

Por abmptc

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 27 Ene 2012 08:56 am

Hola,

He probado poniendo widt:0px pero no funciona, aparece una caja que es una línea vertical, no se adapta al texto.

¿Alguna otra idea?

Saludos

Por abmptc

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 27 Ene 2012 12:36 pm

Lo que quieres hace es esto:

Aquí el ejemplo funcionando

Y esto el código relevante.

Código HTML :

<!DOCTYPE html><!-- HTML5 is good -->
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centrado de div</title>
<style type="text/css">
#wrapp {
   text-align: center;
}
#centrado {
   display: inline-block;
   text-align: left;
   background-color: #ccc;
}
</style>
</head>
<body>
   <div id="wrapp">
      <div id="centrado">
         <p>Esto es el texto</p>
         <p>Más texto.</p>
      </div>
   </div>
</body>
</html>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 27 Ene 2012 01:01 pm

Hola,

Muchas gracias por tu respuesta. La he probado en Firefox y funciona perfectamente, pero.... la he probado en Internet Explorer 7, que es donde me hace falta, y la caja del Div no se ajusta al texto que contiene.

¿Alguna otra idea?

Saludos.

Por abmptc

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 27 Ene 2012 01:21 pm

Porque IE7 inline-block en elementos block como el <div> no se comporta como debería. Más información aquí.

Pero salvando eso ¿por qué te preocupa IE7?.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 29 Ene 2012 10:21 am

afortunadamente ya existe actualización de IE9, que se adapta a estos lenguajes.

Por cci_moni

4 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 30 Ene 2012 08:34 am

Desafortunadamente en mi trabajo aun tenemos IE7, y de momento no lo van a cambiar, por lo que me vendría bien alguna solución que funcionara en esta versión. ¿Se os ocurre alguna otra cosa?

Saludos.

Por abmptc

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 30 Ene 2012 12:21 pm

Me temo que ese no es motivo para seguir soportando ese navegador. Esto que estás haciendo ¿es un desarrollo interno del lugar donde trabajas o va a estar en línea para todo el mundo?.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 30 Ene 2012 02:23 pm

Les recuerdo que la versión mas usada de IE sigue siendo la 8, así que no es tan fácil como decir que ya existe IE9 y hacer de cuenta que el mundo es bello.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Front-end Developer

Citar

Escrito el 31 Ene 2012 12:26 pm

Es un desarrollo interno del lugar donde trabajo

Por abmptc

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 31 Ene 2012 01:57 pm

Entonces no deberías preocuparte por esos detalles. Seguramente la gente que trabajará con el desarrollo que estás haciendo entenderá lo que está haciendo.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Centrar un DIV y que se acople al texto

Escribe una respuesta rapida