Foros del Web » Creando para Internet » CSS »

Centrar capa

Estas en el tema de Centrar capa en el foro de CSS en Foros del Web. Hola amigos, alguien me puede ayudar a centrar el contenido del div padre. lo eh centrado con <center>, pero no podria hacer esto con css ...
  #1 (permalink)  
Antiguo 18/11/2009, 15:40
Avatar de uselox  
Fecha de Ingreso: agosto-2008
Ubicación: Lima, Perú
Mensajes: 168
Antigüedad: 9 años, 3 meses
Puntos: 12
Centrar capa

Hola amigos, alguien me puede ayudar a centrar el contenido del div padre.
lo eh centrado con <center>, pero no podria hacer esto con css ?
Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<style type="text/css">
<!--
body {
	padding:0;
	margin:0;
}

.box-photos {
	padding:1px 3px 0 2px;
	width:440px;
}

.box-photos .column {
	margin:5px;
	width:100px;
	float:left;
}

.box-photos .column div {
	margin:0 0 7px 0;
	border:1px #000000 solid;
	width:100px;
	height:100px;
}
-->
</style>
</head>

<body>
<!--<center>-->
<div class="box-photos" align="center">
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
</div>
<!--</center>-->
</body>
</html> 
  #2 (permalink)  
Antiguo 18/11/2009, 16:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar capa

Hola:

En tu css en la class "box-photos" añade:

Código:
margin:0 auto;
y en tu HTML suprime todas los <center></center>

Saludos.

  #3 (permalink)  
Antiguo 18/11/2009, 16:11
Avatar de uselox  
Fecha de Ingreso: agosto-2008
Ubicación: Lima, Perú
Mensajes: 168
Antigüedad: 9 años, 3 meses
Puntos: 12
Respuesta: Centrar capa

uhmm, ok esta solucionado pero no entiendo, si no hay center por ningun lado..
  #4 (permalink)  
Antiguo 19/11/2009, 14:46
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar capa

Hola:

¿y esto?

Código:
<body>
<!--<center>-->
<div class="box-photos" align="center">
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
  <div class="column">
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
    <div>Content for New Div Tag Goes Here</div>
  </div>
</div>
<!--</center>-->
</body>
Aunque ya sé que, en concreto <center> y </center> están puestos como comentarios pero además es una etiqueta obsoleta, así que no son necesarias.

Saludos.

  #5 (permalink)  
Antiguo 19/11/2009, 14:57
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Centrar capa

Creo que lo que se refiere uselox es que no entiende que con

Código:
margin: 0 auto;
se centre un div, no le ve lógica.
  #6 (permalink)  
Antiguo 19/11/2009, 16:00
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar capa

Hola:

Cita:
Iniciado por Impostor Ver Mensaje
Creo que lo que se refiere uselox es que no entiende que con

Código:
margin: 0 auto;
se centre un div, no le ve lógica.
Impostor, puede que tengas razón.

uselox, la propiedad margin admite de 1 a cuatro valores:

* Si solo se indica un valor, todos los márgenes tienen ese valor.
* Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
* Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho.
* Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.

entonces al indicar margin:0 auto, le estamos indicando que tanto el margen superior como el inferior es 0 y tanto el derecho como el izquierdo es auto, de automático, es decir el navegador pondrá el elemento totalmente centrado.

Saludos.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:17.