Divs centrados con CSS

Razican · #1 (**permalink**) 07/03/2010, 04:43

Hola, tengo 3 divs, en una misma línea, y los he colocado mediante display: table-cell; pero, tengo 2 problemas, los márgenes entre los divs no se respetan, y me es imposible centrar el conjunto dentro de otro div contenedor.

Resumiendo, tengo un div que cambia el ancho según el ancho de la ventana, y luego, tengo dentro de el 3 divs, de ancho fijo. Lo que quiero es poder centrar esos 3 divs dentro del contenedor, con un margen de 20 px entre ellos.

jomaruro · #2 (**permalink**) 07/03/2010, 05:04

Hola:

Sería conveniente que indicaras la URL de tu página o si no la tienes pusieras tu código aquí para poder ayudarte.

Saludos.

Razican · #3 (**permalink**) 07/03/2010, 07:39

Código HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
		<head>
			<title>MegaPublik | Juego de Estrategia</title>
			<link rel="stylesheet" href="./styles/css/formate.css" />
			<link rel="shortcut icon" href="./styles/images/favicon.ico" />
		</head><body id="index" onload="time(); width();" class="index">
	<script type="text/javascript"><!--
		date = new Date("07 Mar 2010 14:36:37");
		function time(){
			var hours=date.getHours();
			var minutes=date.getMinutes();
			if(hours<10){ hours='0'+hours;}
			if(minutes<10){minutes='0'+minutes; }
			output=hours+":"+minutes;
			document.getElementById('live_time').innerHTML=output;
			date.setSeconds(date.getSeconds()+1);
			setTimeout("time()",1000);
		}
		//-->
	</script>

	<script type="text/javascript"><!--
		function width(){
			var wz=window.innerWidth;
			var wz2= document.getElementById("data_top").style.width;
			document.getElementById("data_top").style.width= (wz-365)+"px";
			setTimeout("width()",250);
		}
		//-->
	</script>
	<div id="topmenu" class="topmenu">
		<div id="name" class="name"><a class="name" href="index.php"><img alt="mini_logo" src="./styles/images/icon_mini.png" /> MegaPublik</a></div>
		<div id="lang" class="lang"><span style="text-align:right;"><a href="index.php?lang=es"><img alt="ES" src="./styles/images/languages/es.png" /></a> <a href="index.php?lang=en"><img alt="EN" src="./styles/images/languages/en.png" /></a></span></div>
	</div>
	<div id="logo" class="logo">
		<a href="index.php"><img alt="logo" src="./styles/images/logo.png" /></a>

	</div>
	<div id="data" class="data">
		<div id="day" class="day">
			<div class="menutext1">
				<div class="menutext2">Día 118</div>
			</div>
		</div>
		<div id="data_corner_left" class="data_corner_left"></div>

		<div id="data_top" class="data_top">
			<div class="menutext3">
				<div class="menutext4">
					<form action="index.php" method="post">
						<div id="user" class="user"><label>Nombre del ciudadano:</label> <input class="top_input" type="text" name="user" /></div>
						<div id="pass" class="pass"><label>Contraseña:</label> <input class="top_input" type="password" name="pass" /></div>
						<div id="submit" class="submit"><input class="top_submit" value="Conectar" type="submit" name="submit" /></div>

					</form>
				</div>
			</div>
		</div>
		<div id="data_corner_right" class="data_corner_right"></div>
		<div class="live_time">
			<div class="menutext1">
				<div id="live_time" class="menutext2">14:36</div>

			</div>
		</div>
	</div>
	<div id="hr" class="hr"></div>
	<div id="main" class="main">
		<div id="main_left" class="main_left">
			<div id="lmtop" class="lmtop">
				<div id="top_left" class="top_left">Navegación</div>

				<div id="top_right" class="top_right"></div>
			</div>
			<div id="lmcenter" class="lmcenter">
				<div id="lmenu" class="lmenu">
					<div id="hrlm" class="hrlm"></div>
					<div id="reg" class="left_link"><a href="index.php?page=reg">Regístrate</a></div>
					<div id="hrlm2" class="hrlm"></div>
					<div id="tour" class="left_link"><a href="index.php?page=tour">Descubre MegaPublik</a></div>

					<div id="hrlm3" class="hrlm"></div>
					<div id="offers" class="left_link"><a href="index.php?page=offers">Completa ofertas</a></div>
				</div>
				<div id="lmrborder" class="lmrborder"></div>
			</div>
			<div id="lmbottom" class="lmbottom">
				<div id="lmbleft" class="lmbleft"></div>
				<div id="lmbrcorner" class="lmbrcorner"></div>

			</div>
		</div>
		<div id="vhr" class="vhr"></div>
		<div id="main_right" class="main_right">
		</div>	
	</div><div><br /></div>
<div class="validator">
	<a href="http://validator.w3.org/check?uri=referer">
		<img
			src="http://www.w3.org/Icons/valid-xhtml10"
			alt="Valid XHTML 1.0 Strict" height="31" width="88" />
	</a> 
	<a href="http://jigsaw.w3.org/css-validator/check/referer">

		<img style="border:0;width:88px;height:31px"
			src="http://jigsaw.w3.org/css-validator/images/vcss"
			alt="¡CSS Válido!" />
	</a> 
	<a href="http://www.w3.org/WAI/WCAG2AAA-Conformance" title="Explanation of WCAG 2.0 Level Triple-A Conformance">
		<img height="32" width="88" 
			src="http://www.w3.org/WAI/wcag2AAA"
			alt="Level Triple-A conformance, W3C WAI Web Content Accessibility Guidelines 2.0" />
	</a>
</div>
<div><br /></div>
</body>
</html>

Código:

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none;}

body{
background: url(./../images/background.jpg) no-repeat fixed center top;
text-align: center;
}
.topmenu {
background-image: url(./../images/topmenu_bg.png);
background-repeat: repeat-x;
height: 43px;
width: 100%
}
.name {
font-family: Helvetica, sans-serif;
color: white;
font-weight: bold;
margin-left: 40px;
margin-top: 4px;
float: left;
height: 43px;
text-align: left;
}
.lang {
margin-right: 100px;
margin-top: 6px;
float: right;
height: 43px;
text-align: right;
}
.validator {
text-align: center;
}
.logo{
text-align: center;
width: 100%;
}
.data{
width: 100%;
}
.day{
background-image: url(./../images/data_menu/corner.png);
float: left;
height: 35px;
width: 140px;
display: table; 
#position: relative;
}
.data_corner_left{
background-image: url(./../images/data_menu/corner_left.png);
background-repeat: no-repeat;
width: 26px;
height: 35px;
float: left;
}
.data_top{
background-image: url(./../images/data_menu/data_menu.png);
background-repeat: repeat-x;
float: left;
height: 35px;
display: table; 
#position: relative;
}
.data_corner_right{
background-image: url(./../images/data_menu/corner_right.png);
background-repeat: no-repeat;
width: 26px;
height: 35px;
float: left;
}
.live_time{
background-image: url(./../images/data_menu/corner.png);
float: left;
height: 35px;
width: 140px;
display: table; 
#position: relative;
}
.menutext1{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: top;
}
.menutext2{
text-align: center;
font-family: Helvetica, sans-serif;
color: grey;
font-weight: bold;
#position: relative;
#top: -50%;
}
.menutext3{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.menutext4{
text-align: center;
font-family: Helvetica, sans-serif;
color: grey;
#position: relative;
#top: -50%;
display: table-row;
}
.user{
display: table-cell;
margin-left: 5%;
}
.pass{
display: table-cell;
margin-left: 20px;
}
.submit{
display: table-cell;
margin-left: 20px;
}
.top_input{
height: 15px;
font-family: Times New Roman, serif;
color: black;
font-size: 14px;
text-align: center;
}
.top_submit{
font-family: Times New Roman, serif;
color: black;
font-size: 14px;
text-align: center;
/*background: url(./../images/submit_button.png) no-repeat;*/
}
.hr{
height: 1px;
width: 91%;
margin-left: 4%;
margin-right: 5%;
background-color: rgb(212,212,212);
color: rgb(225,225,225);
margin-top: 45px;
margin-bottom: 20px;
filter: alpha(opacity=90);
opacity: 0.90;
}
.main{
margin-left: 5%;
margin-right: 5%;
width: 90%;
height: 500px;
}
.main_left{
width: 20%;
height: 100%;
text-align: center;
background-color: white;
filter: alpha(opacity=75);
opacity: 0.75;
color: blue;
float: left;
}
.vhr{
width: 1px;
height: 100%;
margin-left: 1%;
margin-right: 1%;
background-color: rgb(212,212,212);
color: rgb(225,225,225);
filter: alpha(opacity=90);
opacity: 0.90;
float: left;
}
.main_right{
width: 77%;
height: 100%;
text-align: center;
background-color: white;
filter: alpha(opacity=75);
opacity: 0.75;
color: green;
float: left;
}
.hrlm{
height: 1px;
width: 90%;
margin-left: 5%;
margin-right: 5%;
background-color: blue;
color: blue;
margin-top: 5px;
margin-bottom: 5px;
filter: alpha(opacity=90);
opacity: 0.90;
}
img{
border: 0px;
text-decoration: none;
}

Caquilla23 · #4 (**permalink**) 07/03/2010, 08:55

Crea un contenedor para englobar los 3 elementos.

#centrar {
width: el que sea;
margin-left:auto;
margin-right: auto;
}

Creo que así debería funcionar.

Razican · #5 (**permalink**) 07/03/2010, 11:14

No, así no funciona. Antes, me funcionaba con <span> pero W3C dice que poner un span en ese lugar está mal. También me funciona con un <a>. Pero W3C dice lo mismo...

daPhyre · #6 (**permalink**) 07/03/2010, 20:36

Es extraño que te funcione con un span y no con un div. Pero si lo hace, ha de ser por su propiedad natural display:inline (div tiene un display:block por naturaleza).

Intenta poner esa línea, a ver si de casualidad te da el efecto que buscas. Suerte

bkolores · #7 (**permalink**) 07/03/2010, 20:55

display: table-cell para que???

aplique margin:0 auto; y el width:auto.
funciona porque lo probe

Razican · #8 (**permalink**) 08/03/2010, 09:44

Por alguna causa, incluso sin divs, (con plain text) tampoco me lo centra.

Y ya he probado lo que me habéis recomendado.