Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Celda centrada en tabla con css

CSS - Celda centrada en tabla con css

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Daniel

Celda centrada en tabla con css

Publicado por Daniel (3 intervenciones) el 30/03/2015 15:03:53
Hola gente; soy bastante flojo en esto de css, necesitaria crear una "tabla" con cuatro celdas, (nada de otro mundo con las etiquetas <div>), pero necesitaría una quinta celda centrada entre las otras cuatro. No se si me entienden, adjunto una imagen de lo que necesito.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel
Val: 2
Ha aumentado su posición en 13 puestos en CSS (en relación al último mes)
Gráfica de CSS

Celda centrada en tabla con css

Publicado por Angel (54 intervenciones) el 30/03/2015 16:02:42
algo asi quieres no? ahi te dejo la demo y codigo ;)

1
2
3
4
5
6
7
8
9
10
<TABLE BORDER>
	<TR>
		<TD>tabla 1</TD>
		<TD ROWSPAN=2>tabla 2</TD>
		<TD>tabla 3</TD>
	</TR>
	<TR>
		<TD>tabla 4</TD> <TD>tabla 5</TD>
	</TR>
</TABLE>

http://codepen.io/AngelKrak/pen/xbBQxZ
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Daniel

Celda centrada en tabla con css

Publicado por Daniel (3 intervenciones) el 30/03/2015 21:51:20
Ya lo hice, la "tabla" de cuatro celdas esta armada con css pero al quinto elemento (que es una imagen), lo puse como flotante con el siguiente código:
<div style="position: relative;">
<div style="position: absolute; left: 180px; top: 180px; z-index: 1;"><img src="Logochico.png" </div>
</div>
El tema es que siempre se muestra en esa posición (left180-top180) cual seria el método para que siempre este al centro de la pantalla?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Celda centrada en tabla con css

Publicado por xve (490 intervenciones) el 31/03/2015 07:31:45
Hola Daniel, haber si te sirve este código que te he preparado... el resultado es como te muestro en la imagen:

capa-centrada-encima-tabla

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="utf-8">
<title>UACC/PIAS</title>
 
<style>
    .centrar {
        position: absolute;
        left:50%;
        width:400px;
        margin-left:-200px;
        margin-top:50px;
        height:300px;
        border:1px solid #808080;

        padding:5px;
        background:white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    table {
        width:100%;
        height:400px;
    }
    table td {
        border-collapse:collapse;
        border-style:inset;
        border-width: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
</style>
 
</head>
 
<body>
 
<div class='centrar'></div>
 
<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
 
</body>
</html>

Espero que te sirva...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Daniel

Celda centrada en tabla con css

Publicado por Daniel (3 intervenciones) el 31/03/2015 15:30:02
Idolooooo... andaba por ese camino pero no me salia. Muchísimas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar