Centrar capa

uselox · #1 (**permalink**) 18/11/2009, 15:40

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>

jomaruro · #2 (**permalink**) 18/11/2009, 16:05

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.

uselox · #3 (**permalink**) 18/11/2009, 16:11

uhmm, ok esta solucionado pero no entiendo, si no hay center por ningun lado..

jomaruro · #4 (**permalink**) 19/11/2009, 14:46

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.

Impostor · #5 (**permalink**) 19/11/2009, 14:57

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.

jomaruro · #6 (**permalink**) 19/11/2009, 16:00

Hola:

Cita:

Iniciado por Impostor

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.