Centre un bloque de contenido cuando no conoce su ancho por adelantado

Question

Después de muchos intentos y búsqueda, nunca he encontrado una forma satisfactoria de hacerlo con CSS2.

Una forma simple de lograrlo es envolverlo en un útil <table> como se muestra en la muestra a continuación. ¿Sabes cómo hacerlo evitando diseños de tablas y también evitando trucos extravagantes?

table { 
 
    margin: 0 auto; 
 
}

<table> 
 
    <tr> 
 
    <td>test<br/>test</td> 
 
    </tr> 
 
</table>

---

Lo que yo quiero saber es cómo hacerlo sin un ancho fijo y también ser un bloque.

Answer 1

@ Jason, sí, <center> obras. Buenos tiempos. Voy a proponer la siguiente, sin embargo:

body { 
 
    text-align: center; 
 
} 
 

 
.my-centered-content { 
 
    margin: 0 auto; /* Centering */ 
 
    display: inline; 
 
}

<div class="my-centered-content"> 
 
    <p>test</p> 
 
    <p>test</p> 
 
</div>

EDITAR @Santi, un elemento a nivel de bloque llenará la anchura del contenedor primario, por lo que será efectiva y el width:100% el texto fluirá a la izquierda, dejándolo con marcas inútiles y un elemento no centrado. Es posible que desee intentar display: inline-block;. Firefox puede quejarse, pero it's right. Además, intente agregar un border: solid red 1px; al CSS del .my-centered-content DIV para ver qué pasa mientras prueba estas cosas.

Answer 2

Ésta va a ser la respuesta más cojo, pero funciona:

Use the deprecated <center> tag.

: P

os decía que sería cojo. Pero, como dije, ¡funciona!

* escalofrío *

Answer 3

Creo que su ejemplo funcionaría igual si usó un <div> en lugar de una tabla < >. La única diferencia es que el texto en la tabla < > también está centrado. Si quieres eso también, solo agrega el text-align: center; regla.

Otra cosa a tener en cuenta es que el <div> rellenará por defecto todo el espacio horizontal disponible. Ponle un borde si no estás seguro de dónde comienza y termina.

Answer 4

Lo siguiente funciona bastante bien. tenga en cuenta la posición de , y el uso de automóviles

<div style="border: 1px solid black; 
      width: 300px; 
      height: 300px;"> 
      <div style="width: 150px; 
         height: 150px; 
         background-color: blue; 
         position: relative; 
         left: auto; 
         right: auto; 
         margin-right: auto; 
         margin-left: auto;"> 
      </div> 
</div> 

NOTA: No estoy seguro si funciona en IE.

Answer 5

#wrapper { 
 
    width: 100%; 
 
    border: 1px solid #333; 
 
} 
 
#content { 
 
    width: 200px; 
 
    background: #0f0; 
 
}

<div id="wrapper" align="center"> 
 
    <div id="content" align="left"> Content Here </div> 
 
</div>

Answer 6

En FF3, se puede:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div> 

Esto tiene la ventaja de utilizar cualquier elemento que tenga sentido más semántica (sustituir el div con algo mejor, en su caso), pero la desventaja de que falla en IE (grr ...)

Aparte de eso, sin establecer el ancho, su mejor opción es utilizar javasc ript para ubicar con precisión el borde izquierdo. Sin embargo, no estoy seguro si clasificaría eso como un "truco peculiar".

Realmente depende de lo que quieras hacer, por supuesto. Dado su caso de prueba simple, un div con text-align: center tendría exactamente el mismo efecto.