como centro una imagen?

HalconVigia · #1 (**permalink**) 02/12/2009, 12:33

buenas!!

tengo el problema que no me centra la imagen en donde quiero

ya le eh movido lo que se pero como mis conocimientos aun son muuuuy basicos al respecto de css no encuentro la solucion

mi codigo es este

Código PHP:

  .Post-Photo-Center { 
margin: 0 auto; 
padding : 3px; 
padding : 3px; 
border-color : #000000; 
border-width : 1px; 
border-style : solid; 
background-color : #ffffff; 
} 
 
// al poner a la derecha o izquierda no tengo problema 
 
.Post-Photo-Left { 
    position:relative; 
    float: left; 
    padding : 3px; 
    padding : 3px; 
}

no logro hacer que las imaenes queden centradas

alguna idea u orientacion de lo que estoy haciendo mal??

de antemano las gracias y
un saludo!!!

Impostor · #2 (**permalink**) 02/12/2009, 12:36

Necesitariamos ver el div contenedor de la imagen.

HalconVigia · #3 (**permalink**) 02/12/2009, 12:43

Buenas!!

este es el Div

Código PHP:

  <div id="Cabecera"> 
     <img class="Post-Photo-Center" src="exploissste.gif"> 
     <center><h1>EXPLORADORES<br> 
                              Registrol<br> 
                              de Usuarios</h1> 
</div>

alguna idea??

un saludo y gracias por responder

#4 (**permalink**) 02/12/2009, 12:45

Prueba a pner:
#Cabecera{
text-align:center;
}

Igual funciona.

Adew

Impostor · #5 (**permalink**) 02/12/2009, 12:52

Vamos a ver, en el codigo que has puesto no veo el div llamado .Post-Photo-Center, la etiqueta <center> esta obsoleta, no veo las propiedades css del div Cabecera, yu por ultimo, el text-align:center; no suele funcionar.

Saludos¡¡

HalconVigia · #6 (**permalink**) 02/12/2009, 14:36

Buenas!!!

antes que nada Gracias por responder... solo dos presiciones

1.- el <center> lo estoy usando en el Texto no en la imagen, para efectos de aprender no sabia lo que comentan de que estuviera obsoleta la etiqueta puesto que me la estan enseñando, seria interesante saber cual es la que lo sustituye

2.- mi necesidad de centrar es la imagen y no toda la cabecera porque el mismo atributo lo utilizo para diferentes imagenes en diferentes partes del Sitio por eso es lo que estoy aplicando en "directo" aqui <img class="Post-Photo-Center" src="exploissste.gif">

en todo caso tengo el codigo de izquierda que funciona perfectamente y tengo otro de derecha que igual, el centrado es mi problema

que concretamente eso es lo que quiero, poder centrar o mejor dicho que me centre la imagen sin importar si es cabecera o parte de otro div

haber si me explique mejor

de nuevo gracias por responder y

un saludo!!!

MarioAraque · #7 (**permalink**) 02/12/2009, 14:47

Si pones algo asi no te funciona?

Código HTML:

#cabecera img{
 display: block;
 margin: auto;
}

No uses la etiqueta center, como dijeron arriba esta obsoleta.

Saludos.

HalconVigia · #8 (**permalink**) 02/12/2009, 15:22

buenas!!

ya vamos mejorando pero en parte

por el momento estoy dejando asi el codigo

Código PHP:

  .Post-Photo-Center { 
    display: block; 
    margin: 0 auto; 
    position:relative; 
    float: auto; 
}

y ya en Firefox ya me aparece centrada la imagen pero no flotante sino que ocupa todo el espacio

en IE simplemente NO hay cambio... sigue sin centrarla

alguna idea....

un saludo

PrendekZ · #9 (**permalink**) 02/12/2009, 15:29

Para esto usaremos una Clase.

Cita:

.imagen_center{
text-align:center;
}

en la HTML sería:

Cita:

Modifica los valores de la imágen y listo ^^ ;)

MarioAraque · #10 (**permalink**) 02/12/2009, 15:39

Pero, por lo que tengo entendido, text-align no funciona con imagenes.

A la imagen la tenes que poner un display:block y un margin:auto.

Float para que queres? Si lo queres centrado, deja solo lo que yo te puse y vas a ver como la imagen estara centrada en todos tus navegadores.

Saludos.

PrendekZ · #11 (**permalink**) 02/12/2009, 15:46

Mario, ami si me funciona así. Qué raro....

HalconVigia · #12 (**permalink**) 02/12/2009, 15:51

buenas!!

el float lo uso porque la imagen tiene que quedar por encima de un texto del titulo sin "descuadrar" el texto que ya esta centrado

por eso estoy usando el float claro que no me esta funcionando de todas maneras

prendekz:
Efectivamente con tu codigo ya centro la imagen tanto en Firefox como en IE

Ahora solo me queda un problema.....

¿Como hacer que la imagen quede "flotando" por encima del texto sin afectarlo?

de nuevo las gracias y
un saludo!!

PrendekZ · #13 (**permalink**) 02/12/2009, 16:12

Pero puedes usar la imágen de fondo y así el texto queda encima.

puedes mostrarme para entender mejor, si quieres enviame mensaje privado.

HalconVigia · #14 (**permalink**) 02/12/2009, 16:26

buenas!!

sip pero basicamente lo que necesito es que la imagen este centrada por "encima" del texto, para ser mas explicito, que las letras del texto queden por detras de la imagen de alguna manera "flotando"

mi solucion seria poner una capa y asi soluciono todo
pero el maestro no quiere
de hecho ya lo habia hecho asi:

Código PHP:

  <div id="Layer1" style="position:absolute; left:297px; top:290px; width:147px; height:28px; z-index:1"> 
<!-- Codigo, Codigo, Codigo..... --> 
</div>

pero aqui me queda el problema que el profesor quiere que sea por CSS y no por capas...

alguna orientacion??

un saludo!!

PrendekZ · #15 (**permalink**) 02/12/2009, 16:34

Cita:

Iniciado por HalconVigia

buenas!!

sip pero basicamente lo que necesito es que la imagen este centrada por "encima" del texto, para ser mas explicito, que las letras del texto queden por detras de la imagen de alguna manera "flotando"

mi solucion seria poner una capa y asi soluciono todo
pero el maestro no quiere
de hecho ya lo habia hecho asi:

Código PHP:

  <div id="Layer1" style="position:absolute; left:297px; top:290px; width:147px; height:28px; z-index:1"> 
<!-- Codigo, Codigo, Codigo..... --> 
</div>

pero aqui me queda el problema que el profesor quiere que sea por CSS y no por capas...

alguna orientacion??

un saludo!!

Sigo sin entender, para que un imágen por encima del texto?.. el texto no se lograría ver.. :S

Explicate con imágenes o la web directamente.

HalconVigia · #16 (**permalink**) 02/12/2009, 16:39

buenas!

pues... te digo algo? ni yo se para que .... pero son cosas del Profesor :p

la cosa es que el Centrado Izquierdo queda perfecto el Derecho igual

al poner el centrado la imagen queda ocupando la linea del tamaño de la imagen y el texto queda por debajo al igual que el recuadro de este que ya esta declarado en css
lo que se pretende en que la imagen pueda quedar por encima .... tanto del texto como del cuadro que rodea el texto...

porque? pues son practicas y realmente no le veo mucha aplicacion practica al menos por el momento, aunque pudiera ser que si en un futuro

de antemano gracias!!

un saludo!!

PrendekZ · #17 (**permalink**) 02/12/2009, 17:12

oh! Entiendo, ya veo que es para una prueba del profe..

Bueno Te enseñare algo qué puede servir.

El texto está centrado?

Coloca en la imágen esto:

CSS:

Cita:

.imagen_center{
text-align:center;
}
#imgdivcenter{
width:400px;
position:absolute;
left:50%;
margin-left:-200px;
z-index:2;
}

de la div "imgdivcenter" Cambia el ancho y coloca el alto, margin-left: coloca la mitad de el valor de el ancho pero negativo me explico, si tienes: 400px, sería: -200px, si tienes 550px serían -275px, y así sucesivamente, Esto hará el centrado de está div con absolute además tendrás por encima la imágen con el "z-index:2".

en la HTML sería:

Cita:

elsalta · #18 (**permalink**) 02/12/2009, 19:25

Hola, de metido nomás.. css toma como punto X=0 Y=0 de las imagenes la esquina superior izquierda, es por eso que si le das posicion a lo ancho 50% y vertical 50% no te va a quedar nunca centrada, lo que si va quedar en un medio absoluto es dicha esquina, por eso sumamos un margen negativo a las declaraciones, logicamente ese margen negativo será igual al tamaño de la imagen/2 (ancho/2 y alto/2) se entiende? El mismo concepto aplica para centrar un div

PrendekZ · #19 (**permalink**) 02/12/2009, 19:57

elsalta,

lo se, pero lo que le di de ancho 50% y altura 50% es a a la div y lo puedes ver no a la imágen, la imágen como tal está centrada en la clase ".imagen_center", la otra es la div que contendrá la imágen así Estára por encima de lo que el amigo desea. ;)

Saludos.

HalconVigia · #20 (**permalink**) 02/12/2009, 22:49

Buenas!!!

compañeros pues antes que nada muchisimas gracias por su ayuda y de verdad que estoy aprendiendo mas aqui con ustedes que con el profe :p

pero con la mala noticia que sigue haciendome lo mismo :(

la imagen ya aparece centrada y todo "perfecto" tanto en IE como en FF

pero.....

me queda el problema que la imagen NO esta por encima del texto, sino que ocupa toda su linea en donde baja todo lo demas....

para explicarme mejor.... es como si simplemente ubiera puesto la imagen con <img normal

estoy intentando poner una imagen de como queda para explicarme mejor haber si me funciona porque es la primera vez que lo voy a intentar poner en un foro

de antemano Gracias

y un Saludo!!

HalconVigia · #21 (**permalink**) 02/12/2009, 22:50

una Disculpa duplique el mensaje

creo que pique dos veces....

un saludo!!

PrendekZ · #22 (**permalink**) 02/12/2009, 23:02

Cita:

Iniciado por HalconVigia

Buenas!!!

compañeros pues antes que nada muchisimas gracias por su ayuda y de verdad que estoy aprendiendo mas aqui con ustedes que con el profe :p

pero con la mala noticia que sigue haciendome lo mismo :(

la imagen ya aparece centrada y todo "perfecto" tanto en IE como en FF

pero.....

me queda el problema que la imagen NO esta por encima del texto, sino que ocupa toda su linea en donde baja todo lo demas....

para explicarme mejor.... es como si simplemente ubiera puesto la imagen con <img normal

estoy intentando poner una imagen de como queda para explicarme mejor haber si me funciona porque es la primera vez que lo voy a intentar poner en un foro

de antemano Gracias

y un Saludo!!

Tengo una Idea!!

insertar el texto en una div.

html:

Cita:

<body>
<div id="imgdivcenter"><img src="imagen.png" width="500" height="350" class="imagen_center" /></div>
<div id="text_web">Texto</div>
</body>

css:

Cita:

#text_web{
width:400px;
margin-left:auto;
margin-right:auto;
z-index:1;
}
.imagen_center{
text-align:center;
}
#imgdivcenter{
width:400px;
position:absolute;
left:50%;
margin-left:-200px;
z-index:2;
}

Modifica los valores CSS.

Si sigué sin funcionar me avisas.

HalconVigia · #23 (**permalink**) 03/12/2009, 12:38

Buenas!!

pues.... si efectivamente funciona en FF en IE no :(

y otro detalle... que el profe dice que deve ser solo en CSS no con capas

ya no se que moverle :(

un saludo!!

jomaruro · #24 (**permalink**) 03/12/2009, 15:11

Hola:

Cita:

Iniciado por HalconVigia

y otro detalle... que el profe dice que deve ser solo en CSS no con capas

¿Qué diferencia hay, según tú o tu profesor, entre CSS y capas?

Saludos.

PrendekZ · #25 (**permalink**) 03/12/2009, 15:17

una duda, tiene que ser centrado?

si no es así... haz esto:

Cita:

<body>
<p class="text_left">Holaaaaaaa</p>
<div id="imgdivleft"><img src="imagen.png" width="200" height="160" /></div>
</body>

css:

Cita:

.text_left{
float:left;
}
#imgdivleft{
width:200px;
position:absolute;
margin-left:-30px;
z-index:2;
}

Modifica los tamaños y listo, también modifica el tamaño de "margin-left:-30px;" hasta que te gusté.

PD2: Ya lo hice y me funciona.
Así tiene que funcionar sin qué el texto tengo capa.

Ami me funciono y te dejaré el link de mi web para que veas:

http://westden.net/prueba/

Ingresa al anterior link. y mira que la imágen está sobre el texto.

dale clic derecho a la imágen y le das ver imágen. asi verás que si es imágen, se verá transparente por que la hice con opacidad para poder ver el texto.

ya es solo mostrarle a tu profe y listo.

si quieres te puedo pasar el .html con la imágen y listo.

Saludos ;)

HalconVigia · #26 (**permalink**) 13/12/2009, 11:14

Buenas!!!

Gracias.... no habia podido responder por complicaciones... voy a probar el codigo y ya te comentare que sucedio...

un saludo!!