2011-06-11 19 views
6

que tienen el contenedor siguiente:¿Cómo puedo centrar un elemento relativo a su padre?

#container { 
    width: 75%; 
    margin: 0 auto; 
    background-color: #FFF; 
    padding: 20px 40px; 
    border: solid 1px black; 
    margin-top: 20px; 
} 

Se ha generado utilizando ingeniosa: generador de rieles de diseño. ¿Cómo centraría algo dentro de este contenedor y no en toda la página?

EDIT: Lo siento por no proporcionar más información :). Esto es lo que estoy tratando de centro:

<div id="nav"> 
    <ul> 
     <% if current_user %> 
      <li><%= link_to "Sign out",destroy_user_session_path %><span>|</span></li> 
      <li><%= link_to "New snippet",new_snippet_path %><span>|</span></li> 
     <% else %> 
      <li><%= link_to "Login",new_user_session_path %><span>|</span></li> 
      <li><%= link_to "Register",new_user_registration_path %><span>|</span></li> 
     <% end %> 
     <li><%= link_to "Snippets",snippets_path %><span>|</span></li> 
     <li><%= link_to "Chat",messages_path %></li> 
    </ul> 
</div> 

Aquí está la CSS que tengo por él hasta ahora:

#nav { 
    list-style-type:none; 
    padding:0; 
    margin:0; 
} 

#nav li { 
    display:inline; 
} 
+2

¿Qué tipo de elemento estás tratando de centrar? ¿Puedes mostrar algo de HTML? –

+0

¿Podría mostrar el ** HTML ** en lugar del Ruby? Ver fuente, tal vez? –

+0

Es solo un div, con un ul, y un montón de li's. Es un menú de navegación. – Geo

Respuesta

1

Hacer que el div con id="container", tener una clase class="container" y hacer

.container #innerElement { 
position: relative;  
width: <set width here>; 
margin: auto; 
} 
2

Supongo que lo siguiente debería hacer. Asignar un ancho fijo, y luego

#inside-container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 50px; 
} 

Puede especificar los márgenes superior e inferior, pero el valor auto de izquierda y derecha hará que el elemento de centrado.

Actualización: No he visto su código antes. Ver la respuesta de @ Pekka para los elementos inline.

5

Si usted está tratando de centrar los elementos de la lista display: inline, dando el contenedor

text-align: center 

va a funcionar.

Si se trata de elementos de bloque, las respuestas de @ slhck y @ anirudh son la solución.

+0

Pero text-align: center se está centrando en la página. Yo también lo había intentado. – Geo

+1

@Geo: por lo que puedo ver, 'text-align: center' debería estar funcionando. ¿Puede agregar su HTML completo (relevante) (obtenido de Ver código fuente, no la versión de Ruby) y CSS a una [jsFiddle demo] (http://jsfiddle.net/)? – thirtydot

+0

Sí, aquí está: http://jsfiddle.net/zW2vW/1/. También agregué comentarios donde comienza la aplicación.css y dónde comienza el estilo.css. – Geo

Cuestiones relacionadas