Centrar dos tablas dentro de una capa
5 seguidores
Estoy dandole vueltas a esto y creo que cuanto mas vueltas le doy peor soluciones se me ocurren.
El caso es que tengo una ficha de producto y cada producto tiene un par de tablas con mas detalles.
Estas tablas deben aparecer bajo la tipica foto y tal, pero de forma que esten las dos en la misma linea -separadas- y el conjunto centrado horizontalmente. Algo tal que esto
FOTO DEL PRODUCTO
bla bla bla bla
|Tabla 1| (x) |Tabla 2| | <-- esta linea va centrada
(x) es el eje de simetria o sea el centro XD
Actualmente tengo las tablas rodeadas con un div con width: 75% y margin: auto y para centrar esa div en el espacio de la ficha.
Lo unico que me falta es centrar las tablas dentro de esa div. Pero no se me ocurre como ó_ò
orange
No me acabo de enterar ¿y un pequeño esquemita con el PS en un minutín?
¿Quieres centrar esas 2 tablas verticalmente dentro de un contenedor?
sole
Si, tienes razon. Es que es un poco dificil de explicar :D
http://farm1.static.flickr.com/123/367070505_9a496e3733_m.jpg
Se explica mas asi?
Por cierto, tenia ilusion de usar imageshack como todo el mundo pero al final he tenido que tirar de flickr...
orange
Vale, dale un WIDTH al contenedor y ponle margin: XX auto XX auto; (donde XX es arriba y abajo respectivamente). Se te centrará sola.
Eso no te funcionará en Explorer 5.x, a los que tendrás que parsear metiendo un margin-left (por ejemplo) a pelo o metiendo otro contenedor más y utilizando la treta del text-align
sole
No, si el contenedor ya tiene width y margin auto y se centra.
El problema es que las dos cajas amarillas son dos tablas y en lugar de ir las dos en la misma linea, sale una bajo de la otra.
He probado a ponerles float: left y con eso consigo que esten en la misma linea, pero me falta el paso final: que esten centradas dentro de la caja contenedora.
Ademas hay otro tema y es que en algunas ocasiones puede que una de las dos cajas no aparezca, con lo que no puedo depender de especificar un margen fijo para centrarlas.
orange
Veamos,
Yo le pondría a una float:left y a la otra float:right. igual es que no te acabo de entender ¿quieres que las 2 estén centradas a la vez? ¿ein? ¿cómo es eso? ¿que dejen algo de margen de los lados?
sole
Si, el problema es que aunque les ponga floats, tanto las dos con float left como si una es left y el otro right, el alineamiento de esa "linea de tablas" continua siendo a la izquierda.
Y como son tablas no puedo decirles que text-align: center , porque son elementos de bloque :)
Por eso estaba dandole vueltas a ver como lo podria hacer con margenes o que se yo, pero no se me ocurre...
zigotica
tienes el esquema basico en html/css?
sole
Vale, pongo lo basico:
<code><style>
#product_data {
background-color: #efe;
border: 1px solid #666;
padding: 20px;
text-align: center;
width: 300px;
}
#tablas {
background-color: #fee;
border: 1px solid #666;
margin: auto;
width: 85%;
}
.tablita {
background-color: #eef;
border: 1px solid #666;
float: left;
}
</style>
<div id="product_data">
<p>texto texto, cositas e imagenes, blabla</p>
<div id="tablas">
<table class="tablita">
<tr>
<td>datos 1</td>
</tr>
</table>
<table class="tablita">
<tr>
<td>datos 2</td>
</tr>
</table>
</div>
</div></code>
Si lo "ejecutais" vereis el tema ... yo querria ver las tablitas centradas tal y como el texto esta centrado.
Y si quitais el float es el problema de una tabla en cada linea.
zigotica
claaaaro, el problema es que para flotar debes asignar un ancho
sole
Es una guarrada y quiero evitarlo a toda costa pero lo que quiero se haria con tablas tal que asi:<code><style>
#product_data {
background-color: #efe;
border: 1px solid #666;
padding: 20px;
text-align: center;
width: 300px;
}
#tablas {
background-color: #fee;
border: 1px solid #666;
margin: auto;
width: 85%;
}
.tablita {
background-color: #eef;
border: 1px solid #666;
}
</style>
<div id="product_data">
<p>texto texto, cositas e imagenes, blabla</p>
<div id="tablas">
<table align="center" >
<tr>
<td style="padding-right: 50px;">
<table class="tablita">
<tr>
<td>datos 1</td>
</tr>
</table>
</td>
<td>
<table class="tablita">
<tr>
<td>y mas datos!</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div></code>
sole
A quien le debo asignar el ancho? a las tablas que tienen que flotar? Es que le he puesto un par de widths a las del test case y siguen estando alineadas a la izquierda :P
pseudo
Supongo que si preguntas aquí es porque tu espíritu estandartista te impide hacer un div extra que envuelva las dos tablas, darle un ancho y centrarlo con margin:0 auto, no es así?
akeru
Yo, por echar un cable, he hecho lo siguiente.
Además como h ay tantas formas, pues si te vale esta genail:
div.general{
text-align:center;
background:#ff0000;
width:250px;
}
.general div {text-align:center;width:95%;margin:2 2 2 2;padding:2px;}
TABLE{width:75%;}
TD{background-color:#000;color:#fff;text-align:center;}
Por otro lado:
<div class="general">
<div>Foto</div>
<div>balbalabalala</div>
<div>
<table cellpadding="0" cellspacing="1" border="0">
<tr>
<td>
<!--una tabla-->
<table cellpadding="0" cellspacing="1" border="0">
<tr><td>Tabla 01</td></tr>
</table>
<!--final tabla-->
</td>
<td>
<!--una tabla-->
<table cellpadding="0" cellspacing="0" border="0">
<tr><td>Tabla 02</td></tr>
</table>
<!--final tabla-->
</td>
<td>
<!--una tabla-->
<table cellpadding="0" cellspacing="0" border="0">
<tr><td>Tabla 03</td></tr>
</table>
<!--final tabla-->
</td>
</tr>
</table>
</div>
</div>