Es posible Centrar sin table ?

Anarko · #1 (**permalink**) 29/04/2006, 05:48

Hola,

he intentado de todo para centrar los 2 divs "div_que_centra".

Ya he leido cerca de 20 respuestas a preguntas similares, y no logro que la presentación lograda con la tabla, se logre en el "div_que_centra" ?

Cómo puedo hacerlo ?

Y otras 2:

Como lograr que la página entera tenga el color y no solo donde hay texto ?

Como colocar en CSS el cellspacing="5" de la tabla ?

Gracias.

Esto es lo que tengo, por favor, gasten un minutico pegandolo en su editor y corriendolo, he utilizado de todo...

display:block;
text-align: center!important;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
html, body {
width: 760px;
margin: 0 auto;}
display: table-cell;
clear: both;

Y no logro que el contenido centre:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Es posible Centrar sin table ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color: #c2e3ff;
font-family: arial;
}
.div_que_centra{
	width: 650px;
	margin: 0 auto;
	text-align: center;
	border: 1px black solid;
}
.div_columna_de_texto{
	margin: 0 auto;
	border: 2px red dotted;
	text-align: center;
	float: right;
	padding: 5px;
	margin: 5px;
}
.centro{
	margin: 5px auto;
}
td{
	border: 2px red dotted;
	text-align: center;
	padding: 5px;
	margin: 5px;
}
</style>
</head>
<body>
<div class="div_que_centra">
Esto si ta centrado
<div class="div_columna_de_texto">
Este es mi problema
</div>
<div class="div_columna_de_texto">
Este es mi problema
</div>
<br /><br /><br /><p>Esto es lo que se quiere lograr:</p>
<table class="centro" cellspacing="5"><tr>
<td>Este es mi problema
</td>
<td>Este es mi problema
</td>
</tr></table></div>
</body>
</html>

Hereje · #2 (**permalink**) 29/04/2006, 13:14

Un par de cambios al código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<title>Es posible Centrar sin table ?</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
	<style type="text/css"> 
		body { 
			background-color: #c2e3ff; 
			font-family: arial; 
		} 
		.div_que_centra { 
			width: 650px; 
			margin: 0 auto; 
			text-align: center; 
			border: 1px black solid; 
		} 
		.div_columna_de_texto { 
			margin: 0 auto; 
			border: 2px red dotted; 
			text-align: center; 
			padding: 5px; 
			display: inline;
		} 
		
		.centro { 
			margin: 5px auto; 
		} 
		td { 
			border: 2px red dotted; 
			text-align: center; 
			padding: 5px; 
			margin: 5px; 
		} 
	</style> 
</head> 

<body> 
	<div class="div_que_centra">Esto si ta centrado<br /><br /> 
		<div class="div_columna_de_texto primera">Este es mi problema</div> 
		<div class="div_columna_de_texto">Este es mi problema</div> 
	
		<br /><br /><br />
		<p>Esto es lo que se quiere lograr:</p> 
		<table class="centro" cellspacing="5">
			<tr><td>Este es mi problema</td><td>Este es mi problema</td></tr>
		</table>
	</div> 
</body> 
</html>

Por lo menos quedan iguales! La pregunta del color de la pagina entera la verdad que no la entendí, al igual que el pedazo de CSS que está primero no se a que te referis. Con respecto a la consulta de cellspacing, te recomiendo leer Tablas en CSS de las especificaciones.

Saludos!

Anarko · #3 (**permalink**) 30/04/2006, 19:56

Hola, gracias por la ayuda, pero resulta que no coloque el total del texto por que crei que no seria necesario.

Pero resulta que cuando se coloca "texto de verdad" el problema continua, realmente puede centrarse el contenido del div "div_que_centra" con css ?

Pego el código pero con un texto más real, pos resulta que el display: inline y el display: block no funcionan:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Es posible Centrar sin table ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { background-color: #c2e3ff; font-family: arial; }

.div_que_centra {
width: 650px; margin: 0 auto; text-align: center; border: 1px black solid;
}


.div_columna_de_texto{
	margin: 0 auto;
	border: 2px red dotted;
	text-align: center;
	float: right;
	width: 27%;
	padding: 5px;
	display: inline;
	margin: 5px;
}
/*
.div_columna_de_texto {
	margin: 0 auto;
	border: 2px red dotted;
	padding: 5px;
	float: right;
	text-align: center;
	
}
*/
.centro {
	margin: 5px auto;
}
td { border: 2px red dotted; text-align: center; padding: 5px; margin: 5px; }
</style>
</head>
<body>
<div class="div_que_centra">Esto si ta centrado<br />
<div class="div_columna_de_texto">Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema </div>
<div class="div_columna_de_texto">Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código Un par de cambios al código</div>
<div class="div_columna_de_texto">Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema Este es mi problema </div><br />
</div>
</body>
</html>