CSS forma adecuada de Centro de contenido

Prefiero trabajar con un diseño basado en CSS, pero más como un back-end codificador mis conocimientos de CSS son un poco débil. Cuando me involucro con el diseño, tiendo a recurrir al formato basado en tablas porque mi mente ha sido deformada por años de abuso basado en tablas. Hay un problema particular con el que siempre tropiezo. ¿Cuál es la mejor alternativa a CSS:CSS forma adecuada de Centro de contenido

<table width="100%"> 
    <tr> 
     <td align="center"> 
      content goes here 
     </td> 
    </tr> 
</table>

veces uso:

<div style="width:100%; text-align:center">content</div>

Pero esto no parece del todo bien. No estoy tratando de alinear el texto, estoy tratando de alinear el contenido. Además, esto parece tener un efecto en la alineación del texto de los elementos incluidos, que requiere ajustes para corregirlos. Una cosa que no entiendo es: ¿por qué no hay un flotador: estilo central? Parece que esa sería la mejor solución. Con suerte, me falta algo y hay una forma perfecta de CSS para hacer esto.

Fuente

2009-04-06 Paul Keister

Tienes razón en que text-align está destinado a la alineación del texto. En realidad, solo Internet Explorer te permite centrar cualquier cosa que no sea texto. Cualquier otro navegador maneja esto correctamente y no permite que los elementos de bloque se vean afectados por text-align.

Para centrar elementos de bloque usando CSS utiliza margin: 0 auto; tal como sugirió Joe Philllips. Aunque no es necesario que guardes la mesa en absoluto.

El motivo por el que no hay float: center; es que flotante está destinado a colocar elementos (normalmente imágenes) ya sea a la izquierda oa la derecha y tienen un flujo de texto a su alrededor. Flotar algo en el centro no tiene sentido en este contexto, ya que eso significaría que el texto debería fluir en ambos lados del elemento.

Fuente

2009-04-06 19:07:08 Guffa

Buena captura con la mesa. No lo miré lo suficiente. –

Hola, gracias la respuesta, ayuda. Pero cómo 'margin: 0 auto;' hace la magia, no entiendo por qué cero y valor automático centrarán la tabla? – GMsoF

@GMsoF: El cero es el margen vertical y el automático es el margen horisontal. 'margin: 0 auto;' es la forma abreviada de 'margin: 0 auto 0 auto;', que es la forma abreviada de 'margin-top: 0; margen-derecha: auto; margin-bottom: 0; margin-left: auto; '. – Guffa

Yo recomendaría poner un <div> en su <td> y establecer el atributo de estilo a style="width: 200px; margin: 0 auto;"

El problema es que se debe establecer un ancho fijo.

Editar: Después de volver a ver la pregunta, recomendaría descartar la tabla por completo. Simplemente use un <div style="width: 200px; margin: 0 auto;> como sugerí y sin necesidad de una mesa. respuesta

Fuente

2009-04-06 18:43:22

Hola gracias la respuesta, lo que ayuda. Pero cómo margin: 0 auto; hace la magia, no entiendo por qué el cero y el valor automático centrarán la mesa? – GMsoF

de d03boy es correcto para el camino correcto para centrar las cosas.

para responder a sus comentarios de otra índole, "Además, esto parece tener un efecto sobre la alineación del texto de elementos cerrados, lo que requiere ajustar a arreglar." Esa es la naturaleza de cómo funciona CSS, establecer una propiedad en un elemento afecta a todos sus hijos, a menos que uno de ellos invalide la propiedad (suponiendo que la propiedad es una que es inherited, por supuesto).

Fuente

2009-04-06 18:50:33

¿Dónde te encuentras comúnmente haciendo esto? Para mí - estoy más a menudo tratando de centrar todo el diseño del sitio, por lo que suelo hacer esto:

<html> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    </body> 
</html> 


body {text-align:center;} 
#wrapper {margin:0 auto; text-align:left; width:980px;}

Esto centrará todo el diseño de la página en 980 px anchura, dejando al mismo tiempo todo el texto alineado a la izquierda (siempre que ese texto esté dentro del elemento #wrapper).

Fuente

2009-04-06 18:58:17

Aquí hay un buen recurso para centrar utilizando CSS.
http://www.w3.org/Style/Examples/007/center
Esto demuestra cómo centrar texto, bloques, imágenes y cómo centrarlos verticalmente.

Fuente

2009-04-06 19:11:32

Uso display:inline-block para permitir text-align:center y centro de contenido sin un ancho fijo:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Centering</title> 

    <style type="text/css"> 
    .container { text-align:center; } 

    /* Percentage width */ 
    .wrapper { width: 99%; } 

    /* Use inline-block for wrapper */ 
    .wrapper { display: inline-block; } 

    /* Use inline for content */ 
    .content { display:inline; } 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div>abc</div> 
      <div>xyz</div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Fuente

2012-10-20 22:04:34

¡Este es un buen truco! –

CSS forma adecuada de Centro de contenido

Respuesta

Cuestiones relacionadas