CSS - Como Centralizar Imagenes

   
Vista:
Imágen de perfil de Kokesoft

Como Centralizar Imagenes

Publicado por Kokesoft (27 intervenciones) el 20/08/2014 23:45:06
Hola a todos los programadores, me llamo carlos y soy de republica dominicana, yebo tiempo queriendo resolver este problemita...

he subido un script de una pagina a un servidor, y cuando cargo la pagina se mostraba totalmente a la izquierda, pero he podido resolverlo gracias a un amigo de la pagina, y la pagina ya me sale centralizada,, pero hay unas imágenes que no se centralizan, que son aquellas imágenes en espera de aprobación de pago, para ser mostrada...

les cuento un poco, estoy creando una pagina para vender pixeles por publicidad, cuando una persona adquiere un espacio publicitario, hasta que no efectué el pago, se muestra una imagen grix en forma de una (x), y con un mensaje que dise en espera de aprobación, y una ves echo el pago la imagen que el comprador ha seleccionado para mostrar se visualiza... el problema es que cuando alguien compra pixeles serca de la linea izquierda, esa imagen grix que se muestra antes del pago, sale fuera del rango de la pagina, y una vez que se efectue el pago la imagen se muestra dentro de la plantilla en el espacio que adquirio el comprador...

Lo que quiero hacer es que la imagen no me salga de la plantilla, que esta centralizada... nose porque se muestra a la izquierda fuera del rango de la plantilla.... aqui les copio el codigo del archivo index.php
la imagen llamada images/na.gif, es la imagen que se muestra antes de efectuar el pago, esta es la que se muestra fuera de la plantilla...
aqui tambien les dejo el link de la pagina, si la visualizan en un monitor tamaño grande se daran cuenta de lo que estoy diciendo... http://dosmillones.hol.es/index.php


Este es el Codigo index.php, si lo desean les puedo copiar el codigo style.css


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
<?php
include("header.php");
include("includes/configure.php");
include("includes/database_tables.php");
?>
 
<div id="fullgrid">
<form action="buy.php" method="post"><input type="image" src="images/px.gif" width="1000" height="1000"></form>
</div>
 
<?php
echo '<div style="position: absolute; left:2; top: 77 ; z-index: 0">';
$sql_show_pic = "SELECT id,url,x1,y1,x2,y2,title,img_name FROM " . TABLE_ORDER . " WHERE cnf_status='1'";
$q_show_pic = mysql_query($sql_show_pic);
$num = mysql_num_rows($q_show_pic);
if($num>0)
{
while($data=mysql_fetch_array($q_show_pic))
{
 
$left = ($data['x1'])*10;
$top = ($data['y1'])*10;
$width=( ( $data['x2'] ) - ( $data['x1'] ) )*10;
$height=( ($data['y2']) - ($data['y1']) )*10;
$image_name = "upload_img/" . $data['img_name'];
echo '<a target="_new" href="' . $data['url'] . '">
<img src="' . $image_name . '" class="g" style="LEFT: ' . $left . 'px; TOP:' . $top .'px;" width="' . $width. '" height="' . $height .'" alt="' . $data['title'] . '" title="' . $data['title'] . '">
</a>';
}
}
echo '</div>';
echo '<div style="position: absolute; left:2; top: 77 ; z-index: 0">';
$sql_show_pic = "SELECT id,url,x1,y1,x2,y2,title,img_name FROM " . TABLE_ORDER . " WHERE cnf_status='0'";
$q_show_pic = mysql_query($sql_show_pic);
$num = mysql_num_rows($q_show_pic);
if($num>0)
{
while($data=mysql_fetch_array($q_show_pic))
{
 
$left = ($data['x1'])*10;
$top = ($data['y1'])*10;
$width=( ( $data['x2'] ) - ( $data['x1'] ) )*10;
$height=( ($data['y2']) - ($data['y1']) )*10;
$image_name = "images/na.gif";
echo '
<img src="' . $image_name . '" class="g" style="LEFT: ' . $left . 'px; TOP:' . $top .'px;" width="' . $width. '" height="' . $height .'" alt="En espera de aprobación" title="En espera de aprobación">';
}
}
echo '</div>';
 
 
?>
 
 
<?php
include("footer.php");
?>
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 xve

Como Centralizar Imagenes

Publicado por xve (350 intervenciones) el 21/08/2014 10:07:03
Hola Kokesoft, la verdad es que es un tanto complicado de la manera que tienes el código...

No se exactamente que imagen es la que tienes que centrar, pero tienes los estilos en linea, y esto dificulta un poco el poder modificar los estilos, si estuviera en clases de CSS seria un poco mas sencillo y limpio.

La posición de un objeto depende del contenedor que lo tenga.

Si por ejemplo, quieres centrar esta imagen:
1
<img src="' . $image_name . '" class="g" style="LEFT: ' . $left . 'px; TOP:' . $top .'px;" width="' . $width. '" height="' . $height .'" alt="En espera de aprobación" title="En espera de aprobación">';

Yo haría algo como:
1
2
3
<div style="text-align:center">
<img src="' . $image_name . '" class="g" width="' . $width. '" height="' . $height .'" alt="En espera de aprobación" title="En espera de aprobación">';
</div>

Aunque como te he comentado, dependerá del contenedor...
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 Kokesoft

Como Centralizar Imagenes

Publicado por Kokesoft (27 intervenciones) el 21/08/2014 15:36:32
Hola XVE, he echo todo lo que me has dicho, pero no ha resuelto el problema... lo que quisiera aser es lo que me has dicho, englobar todas las div en un contenedor
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

Como Centralizar Imagenes

Publicado por xve (350 intervenciones) el 22/08/2014 07:52:31
Si pones esto en una pagina web:
1
2
3
<div style="text-align:center">
	<img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg">
</div>

veras que te centra la imagen... en tu caso, entiendo que el contenedor que la contiene, o no tiene la anchura de la pagina, o tiene mas contenido, o cualquier otra cosa que no permite que se centre.

Lo tienes publicado en Internet?
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 Kokesoft

Como Centralizar Imagenes

Publicado por Kokesoft (27 intervenciones) el 22/08/2014 14:27:57
Buen dia XVE, He probado como me has dicho, y las imagenes cambian de posicion, pero no se colocan donde debieran.....

La pagina si esta publica... http://dosmillones.hol.es/

Asi quedo el archivo index.php


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
<?php
include("header.php");
include("includes/configure.php");
include("includes/database_tables.php");
?>
 
<div id="fullgrid">
<form action="buy.php" method="post"><input type="image" src="images/px.gif" width="1000" height="1000"></form>
</div>
 
<?php
echo '<div style="position: absolute; left:2; top: 77 ; z-index: 0">';
$sql_show_pic = "SELECT id,url,x1,y1,x2,y2,title,img_name FROM " . TABLE_ORDER . " WHERE cnf_status='1'";
$q_show_pic = mysql_query($sql_show_pic);
$num = mysql_num_rows($q_show_pic);
if($num>0)
{
while($data=mysql_fetch_array($q_show_pic))
{
 
$left = ($data['x1'])*10;
$top = ($data['y1'])*10;
$width=( ( $data['x2'] ) - ( $data['x1'] ) )*10;
$height=( ($data['y2']) - ($data['y1']) )*10;
$image_name = "upload_img/" . $data['img_name'];
echo '<a target="_new" href="' . $data['url'] . '">
<img src="' . $image_name . '" class="g" style="LEFT: ' . $left . 'px; TOP:' . $top .'px;" width="' . $width. '" height="' . $height .'" alt="' . $data['title'] . '" title="' . $data['title'] . '">
</a>';
}
}
echo '</div>';
echo '<div style="position: absolute; left:2; top: 77 ; z-index: 0">';
$sql_show_pic = "SELECT id,url,x1,y1,x2,y2,title,img_name FROM " . TABLE_ORDER . " WHERE cnf_status='0'";
$q_show_pic = mysql_query($sql_show_pic);
$num = mysql_num_rows($q_show_pic);
if($num>0)
{
while($data=mysql_fetch_array($q_show_pic))
{
 
$left = ($data['x1'])*10;
$top = ($data['y1'])*10;
$width=( ( $data['x2'] ) - ( $data['x1'] ) )*10;
$height=( ($data['y2']) - ($data['y1']) )*10;
$image_name = "images/na.gif";
 
echo '
<div style="position:relative"> 
<img src="' . $image_name . '" class="g" width="' . $width. '" height="' . $height .'" alt="En espera de aprobación" title="En espera de aprobación">
</div> ';
 
}
}
echo '</div>';
 
?>
 
<?php
include("footer.php");
?>


Y este es asi esta el style.csso



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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9pt; BACKGROUND: url(bodybg.gif) #999999; PADDING-BOTTOM: 0px; width: 989px; margin:0 auto; PADDING-TOP: 0px; FONT-FAMILY: trebuchet ms, helvetica, verdana
}
 
TD {
	FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: trebuchet ms, helvetica, verdana
}
#pageads {
	MARGIN-LEFT: auto; VERTICAL-ALIGN: top; MARGIN-RIGHT: auto; PADDING-TOP: 10px; TEXT-ALIGN: center
}
#pixels {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; LEFT: 0px; MARGIN-LEFT: auto; BORDER-LEFT: 0px; WIDTH: 1000px; MARGIN-RIGHT: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 1000px; TEXT-ALIGN: center
}
#note {
	FONT-SIZE: 8pt; BACKGROUND: #646464; MARGIN-LEFT: auto; COLOR: #999999; MARGIN-RIGHT: auto; FONT-FAMILY: trebuchet ms, arial, helvetica; TEXT-ALIGN: center
}
H1 {
	MARGIN: 0px
}
H2 {
	MARGIN: 0px
}
H3 {
	MARGIN: 0px
}
H4 {
	MARGIN: 0px
}
H5 {
	MARGIN: 0px
}
H4.gold {
	COLOR: #c69b1d
}
HR.c {
	BORDER-RIGHT: 0px; BORDER-TOP: #bbbbbb 1px dashed; MARGIN-BOTTOM: 10px; BORDER-LEFT: 0px; WIDTH: 100%; BORDER-BOTTOM: 0px; HEIGHT: 1px; TEXT-ALIGN: center
}
#tablebreak {
	BACKGROUND: #646464
}
#stat1 {
	FONT-WEIGHT: bold; COLOR: #ffffff; font-size:12px
}
#grey {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #999999
}
.red {
	FONT-WEIGHT: bold; COLOR: #cc0000
}
.red2 {
	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #cc0000
}
#greybold {
	FONT-WEIGHT: bold; COLOR: #cccccc
}
#statgreen {
	FONT-WEIGHT: bold; COLOR: #33ff00; font-size:12px;
}
#pagecontent {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #e1e1e1; PADDING-BOTTOM: 10px; VERTICAL-ALIGN: top; WIDTH: 600px; PADDING-TOP: 10px; TEXT-ALIGN: left
}
#stats {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND: url(statbg.gif) #646464 no-repeat; LEFT: 880px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: 0px; WIDTH: 116px; LINE-HEIGHT: 16px; PADDING-TOP: 2px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 4px; HEIGHT: 37px; TEXT-ALIGN: center
}
#toplogo {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: #646464; LEFT: 0px; MARGIN-LEFT: auto; BORDER-LEFT: 0px; WIDTH: 1000px; MARGIN-RIGHT: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 45px; TEXT-ALIGN: center
}
#navbar {
	BORDER-RIGHT: 2px solid; BORDER-TOP: 2px solid; BACKGROUND: url(navbg.gif) #c69b1d; LEFT: auto; MARGIN-LEFT: auto; BORDER-LEFT: 2px solid; MARGIN-RIGHT: auto; BORDER-BOTTOM: 2px solid; POSITION: absolute; TOP: 45px; HEIGHT: 20px; TEXT-ALIGN: center
}
#links {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-LEFT: auto; BORDER-LEFT: 0px; WIDTH: 600px; MARGIN-RIGHT: auto; BORDER-BOTTOM: 0px; HEIGHT: 20px; TEXT-ALIGN: center
}
A {
	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
IMG {
	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
A.nav:link {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #000000; TEXT-DECORATION: none
}
A.nav:visited {
	FONT-WEIGHT: bold; COLOR: #000000; TEXT-DECORATION: none
}
A.nav:hover {
	TEXT-DECORATION: underline
}
A.pix:link {
	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
A.pix:visited {
	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
A.pix:hover {
	BORDER-RIGHT: 5px; BORDER-TOP: 5px; BORDER-LEFT: 5px; BORDER-BOTTOM: 5px
}
A:link {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #000099; TEXT-DECORATION: none
}
A:visited {
	FONT-WEIGHT: bold; COLOR: #000099; TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline
}
 
 
 
 
 
.black_simple
{
font-family: Verdana;
font-size: 11px;
color: #000000;
}
.small_black_simple
{
font-family: Verdana;
font-size: 9px;
color: #000000;
}
.black_heading
{
font-family: Verdana;
font-weight:bold;
font-size: 11px;
color: #000000;
}
.black_brown_heading
{
font-family: Verdana;
font-weight:bold;
font-size: 11px;
color: #333333;
}
.big_black_brown_heading
{
font-family: Verdana;
font-weight:bold;
font-size: 13px;
color: #333333;
}
 
.brown_simple
{
font-family: Verdana;
font-size: 11px;
color: #990000;
}
.gray_simple
{
font-family: Verdana;
font-size: 11px;
color: #999999;
}
 
.white_text_heading
{
font-family: Verdana;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
 
/*
A:link {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #000000; TEXT-DECORATION: none; 
}
A:visited {
	FONT-WEIGHT: bold; COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline; COLOR: #FF0000; FONT-SIZE: 9pt;
}

*/
 
.button
{
	BORDER: 2px #8496ce ridge;
	PADDING-RIGHT: 3px;
	PADDING-LEFT: 3px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	PADDING-BOTTOM: 1px;
	WIDTH: auto; COLOR: #ffffff;
	PADDING-TOP: 1px;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	BACKGROUND-COLOR: #0B1A45;	
}
 
.g {
 
	position: relative;
 
	border: 0;
 
	z-index: 3;
 
	align: center;
 
}
.textbox_focus{color:#000000;border: 1px solid #FF8B2D;background-image: url('../../images/textarea_back_focus.gif')}
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

Como Centralizar Imagenes

Publicado por Jesus Ramirez Serrano (5 intervenciones) el 19/05/2016 21:35:35
1
2
3
4
5
.centrado{
  display:block;
  margin-left: auto;
  margin-right: auto;
}
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

Como Centralizar Imagenes

Publicado por lorena elideth (2 intervenciones) el 27/05/2016 19:53:34
Hola podrías hacer esto tal vez te funcione

1
2
3
4
5
<div style="text-align:center">
 
	<img src="Imagen.jpg">
 
</div>
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