2010-02-17 13 views
13

Hola a todos,cómo conseguir contenedor principal div para alinear a centrar

que Allways he estado preguntando cómo otras personas llegan a alinearse con el centro del contenedor principal div como la única forma en que manejo hasta el momento es la adición a la css file lo siguiente:

* { relleno: auto; margin: auto; text-align: center; }

he visto otras páginas usando: * {padding: 0px; margen: 0px} pero no puedo ver dónde o qué es lo que hacen, para centralizar el contenedor principal.

¿Alguien podría explicar cómo?

Código ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> 
<title>This is the main container</title> 
<style type="text/css"> 
*{ 
padding:auto; 
margin:auto; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;"> 
<b>This is the main container.</b> 
</div> 
</body> 
</html> 

Podría alguien explicar cómo lo hacen en la página siguiente? http://www.csszengarden.com/?cssfile=/179/179.css&page=4

Gracias

+0

también se puede envolver usted contenta con

, pero mejor solución es a continuación – ant

+1

en la página se ha vinculado a que hacen uso de auto margen en el contenedor.Sin embargo, el relleno automático no es necesario, e incluso puede confundir algunos navegadores. – wheresrhys

+0

@wheresrhys: Gracias, no puedo encontrarlo en el CSS. – Amra

Respuesta

31

No utilizar el selector * como que se aplicará a todos los elementos de la página. Suponga que tiene una estructura como esta:

... 
<body> 
    <div id="content"> 
     <b>This is the main container.</b> 
    </div> 
</body> 
</html> 

continuación, puede centrar el div #content usando:

#content { 
    width: 400px; 
    margin: 0 auto; 
    background-color: #66ffff; 
} 

no saben lo que he visto en otros lugares, pero este es el camino a seguir. El fragmento * { margin: 0; padding: 0; } que ha visto es para restablecer las definiciones predeterminadas del navegador para todos los navegadores y hacer que su sitio se comporte de manera similar en todos los navegadores, esto no tiene nada que ver con centrar el contenedor principal.

La mayoría de los navegadores aplican un margen y un margen predeterminados a algunos elementos que, por lo general, no son consistentes con las implementaciones de otros navegadores. Es por eso que a menudo se considera inteligente usar este tipo de 'reinicio'. El reinicio fragmento de código que se presenta es el más simple de las hojas de estilo de reinicio, puede leer más sobre el tema aquí:

+0

+1 para su respuesta. – ant

+0

No es una buena práctica aplicar * {relleno: 0px; margen: 0px;}, para que sea más compatible con navegador cruzado? – Amra

+1

@Cesar Lopes, en mi opinión lo es, pero parece que hay personas que piensan lo contrario. Pero yo diría que sigan adelante. –

1

que omitiría la declaración * { text-align:center }, ya que establece la alineación centrada para todos los elementos .

lo general, con un recipiente ancho fijomargin: 0 auto debería ser suficiente

2

Puede text-align: centro del cuerpo para centrar el contenedor. A continuación, alinee texto: salga del contenedor para obtener todo el texto, etc. para alinear a la izquierda.

+0

Bienvenido a Stack Overflow =) Tómese un momento para leer la página de ayuda de [Stack Overflow Markdown] (http://stackoverflow.com/editing-help/) para obtener orientación sobre cómo formatear sus respuestas. –

2

El principio básico de centrar una página es tener un cuerpo CSS y main_container CSS. Debe tener un aspecto algo como esto:

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
#main_container { 
    margin: 0 auto; 
    text-align: left; 
} 
Cuestiones relacionadas