Centrar un DIV y que se acople al texto

abmptc · #1 (**permalink**) 26/01/2012, 04:12

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.

emprear · #2 (**permalink**) 26/01/2012, 06:33

Ejemplo

Código HTML:

Ver originalCopiar<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
 
<p>Con tabla</p>
 
 <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> 
    
 <hr />   
    
  <p>con divs</p>  
    
    <div style="text-align: center;"><!-- centrar -->
    <div style="background-color:#AFEEEE;border-width: medium; border-style: outset;display: inline-block;"> <!-- la tabla -->
    <!-- las celdas -->
    <div style="text-align: center;">
    formulario 1
    </div>
    <div style="text-align: center;">
    otra celda
    </div>
    <!-- fin celdas -->
    </div>
    </div>
</body>
</html>

el ejemplo repite exactamente tu esquema, si querés podés aplicar border / padding / margin a las propias celdas

Saludos

abmptc · #3 (**permalink**) 27/01/2012, 01:57

Hola,

He probado el código que me indicabas y funciona en Firefox, pero en Internet Explorer 7 no funciona, la caja del div no se ajusta al contenido.

¿Alguna otra idea?

Saludos

abmptc · #4 (**permalink**) 03/02/2012, 06:06

Hola, finalmete he enconrado varias soluciones:

1ªForma: DIV con formato de tabla

Código:

    <div style="text-align: center;"><!-- centrar --> 
    <div style="background-color:#AFEEEE;border-width: medium; 
border-style: outset;display: inline-block;"> <!-- la tabla --> 
    <!-- las celdas 
    --> 
    <div style="text-align: center;"> 
    Div con formato tabla 
    </div> 
    <div style="text-align: center;"> 
    otra celda 
    </div> 
    <!-- fin celdas --> 
    </div> 
    </div>

Esto funciona en Firefox y las versiones nuevas de Internet Explorer pero en la versión IE 7, no se adapta al texto, la caja ocupa todo el ancho:

2ªForma: DIV Warp (Un div envolvente exterior)

Código:

    <div style="text-align: center;"> 
    <div style="background-color:#AFEEEE; 
        margin:0 auto 0 auto; 
        border-width: medium; border-style: outset; display:inline;"> 
    Div con warp 
    </div> 
    </div>

Funciona perfectamente

3ªForma: DIV con Display:Inline y Body con text-align: center;

Código:

<body style="text-align: center;"> 

<p  style="text-align: left;"> 
dfsdfsfs 
</p> 

<div style="background-color:#AFEEEE; 
    margin:auto; 
    border-width: medium; border-style: outset; display:inline;"> 
Div con display:inline; 
</div>

Saludos