"Bloquear" el interior de un div para centrar solo el padre
Publicado por Mario (1 intervención) el 18/06/2019 15:54:26
Junto con saludar, les escribo una inquietud que tengo en estos momentos en terminos de diseño...
Tengo un div que actualmente se compone de diferentes "cuadrados" los cuales se agregan de forma dinámica al cargar la pagina, por lo que dependerá de si existe o no el dato para que aparezca dicho cuadrado... Éstos pueden ser desde solo 3 hasta mas de 10, por lo que no puedo simplemente manipularlos por un ID... así como tampoco no puedo saber cuales estarán fijo o cuales faltarán...
Dicho esto, en esa imagen
[img]/usr/tmp/5d08ef610dd76-Anotacion-2019-06-18-092548.png[/img]
podemos ver que son 11 bloques y hay 2 que me "sobran"... estos 2 necesito que queden alineados a la izquierda, no centrados... como lo sería este diseño
[img]/usr/tmp/5d08ef74eefb6-Anotacion-2019-06-18-093008.png[/img]
aunque aqui claramente no esta centrado el div completo respecto a su posicion...
Alguna idea? les dejo codigo por si acaso
Tengo un div que actualmente se compone de diferentes "cuadrados" los cuales se agregan de forma dinámica al cargar la pagina, por lo que dependerá de si existe o no el dato para que aparezca dicho cuadrado... Éstos pueden ser desde solo 3 hasta mas de 10, por lo que no puedo simplemente manipularlos por un ID... así como tampoco no puedo saber cuales estarán fijo o cuales faltarán...
Dicho esto, en esa imagen
[img]/usr/tmp/5d08ef610dd76-Anotacion-2019-06-18-092548.png[/img]
podemos ver que son 11 bloques y hay 2 que me "sobran"... estos 2 necesito que queden alineados a la izquierda, no centrados... como lo sería este diseño
[img]/usr/tmp/5d08ef74eefb6-Anotacion-2019-06-18-093008.png[/img]
aunque aqui claramente no esta centrado el div completo respecto a su posicion...
Alguna idea? les dejo codigo por si acaso
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>datos_paciente7</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<style>
.bordes_signos2 {
font-size:8px;
background-color:rgba(221,221,221,0.13);
border:1px solid #ddd;
font-weight:bold;
text-align:center;
display:inline-block;
padding-top:1em;
margin:0px -2.5px 0px -2.5px;
width:9em; height:7em;}.espera-scrollspy {
overflow-y:scroll;
height:70vh;}.list-group-item {
background-color:rgba(221, 221, 221, 0.13);
padding-top:10px;
}.panel-title {
margin-top:0;
margin-bottom:0;
font-size:16px;
color:inherit;}.columna {
padding-left:5px;
padding-right:5px;
}</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><img src="/adultos_28.png">
<h3 class="panel-title">Juanito Perez Run:11111111</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-unstyled">
<li><strong style="color:green">Nombre Social:</strong></li>
<li>Folio:</li>
<li>Edad:</li>
<li>Telefono:</li>
<li>Celular:</li>
<li>Llegada:</li>
<li>T. Accidente</li>
</ul>
<div class="row">
<div style="margin-top:10px">
<ul class="list-group">
<li class="list-group-item izq"><span class="text-danger">NO PASAR POR RECAUDACION</span></li>
<li class="list-group-item izq"><i class="glyphicon glyphicon-time"></i><span> I. Atención:</span><span> 05-10-2019 14:00</span></li>
<li class="list-group-item izq"><i class="glyphicon glyphicon-map-marker"></i><span> Ubicación:</span><span> CLINICA ALEMANA</span></li>
<li class="list-group-item izq"><i class="fa fa-user-md"></i><span> Especialidad:</span><span> INFANTIL - TRAUMATOLOGIA</span></li>
<li class="list-group-item izq"><i class="glyphicon glyphicon-exclamation-sign"></i><span> Motivo:</span><span> <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a venenatis lorem, eu accumsan leo. Sed eu ligula metus. Morbi eu nunc nisi. Duis vestibulum eleifend aliquam. Fusce quis fermentum lacus, sed gravida erat. Fusce molestie varius sem venenatis suscipit. Proin faucibus quam at erat vulputate ullamcorper. Nulla id gravida.<br><br></span></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="margin-bottom:10px;"><img src="/aislamiento_28.png"><img src="/riesgo_caida_28.png"><img src="/acompañar-28.png"><img src="/mochila-28.png"><span class="label label-success pull-right" style="font-size:16px;">C4</span></div>
<div class="col-md-12">
<div><div class="bordes_signos2" style="background-color:#5cb85c;color:white;margin-bottom:-7px;">
<span style="font-size:38px;position:fixed;margin-left:-25px;margin-top:-10px">C4</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Saturometria</span>
<img style="width:14px;" src="/burbuja_96.png">
<span style="display:block; font-size:14px;">90</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Temperatura</span>
<img style="width:14px;" src="/temperatura_96.png">
<span style="display:block; font-size:14px;">38</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Frec. Cardiaca</span>
<img style="width:14px;" src="/corazon_96.png">
<span style="display:block; font-size:14px;">135</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Frec. Respiratoria</span>
<img style="width:14px;" src="/pulmones_96.png">
<span style="display:block; font-size:14px;">135</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Presión Manual</span>
<img style="width:14px;" src="/esfigmomanómetro_96.png">
<span style="display:block; font-size:14px;">135/80</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Presión Equipo</span>
<img style="width:14px;" src="/pulso_maquina_96.png">
<span style="display:block; font-size:14px;">135/80</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Glasgow</span>
<img style="width:14px;" src="/usuario_alerta_96.png">
<span style="display:block; font-size:14px;">100</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Peso</span>
<img style="width:14px;" src="/balanza_96.png">
<span style="display:block; font-size:14px;">98</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">Hemoglucotest</span>
<img style="width:14px;" src="/glucometro_96.png">
<span style="display:block; font-size:14px;">50</span>
</div>
<div class="bordes_signos2">
<span style="display:block;">EVA</span>
<img style="width:14px;" src="/llorando_96.png">
<span style="display:block; font-size:14px;">10</span>
</div></div>
</div>
</div>
<div class="row text-center" style="margin-top:10px">
<div><button class="btn btn-default" type="button"><img src="/Treatment Plan_48.png" height="30"></button><button class="btn btn-default" type="button"><img src="/teleradio_48.png" height="30"></button><button class="btn btn-default" type="button"><img src="/contactos-28.png" height="30"></button><button class="btn btn-default" type="button"><img src="/tubo_de_ensayo_28.png" heigjt="30"></button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/js/jquery-1.12.4.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body></html>
Valora esta pregunta
0