Foros del Web » Creando para Internet » CSS »

como centro una imagen?

Estas en el tema de como centro una imagen? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/12/2009, 12:33
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Pregunta como centro una imagen?

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 {
margin0 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;
    
floatleft;
    
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!!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #2 (permalink)  
Antiguo 02/12/2009, 12:36
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: como centro una imagen?

Necesitariamos ver el div contenedor de la imagen.
  #3 (permalink)  
Antiguo 02/12/2009, 12:43
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Pregunta Respuesta: como centro una imagen?

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
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #4 (permalink)  
Antiguo 02/12/2009, 12:45
lamek
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: como centro una imagen?

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

Igual funciona.

Adew
  #5 (permalink)  
Antiguo 02/12/2009, 12:52
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: como centro una imagen?

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¡¡
  #6 (permalink)  
Antiguo 02/12/2009, 14:36
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

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!!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #7 (permalink)  
Antiguo 02/12/2009, 14:47
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: como centro una imagen?

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.
  #8 (permalink)  
Antiguo 02/12/2009, 15:22
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
De acuerdo Respuesta: como centro una imagen?

buenas!!

ya vamos mejorando pero en parte

por el momento estoy dejando asi el codigo

Código PHP:
.Post-Photo-Center {
    
displayblock;
    
margin0 auto;
    
position:relative;
    
floatauto;

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
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #9 (permalink)  
Antiguo 02/12/2009, 15:29
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

Para esto usaremos una Clase.

Cita:
.imagen_center{
text-align:center;
}
en la HTML sería:

Cita:
<img src="imagen.png" width="500" height="350" class="imagen_center" />
Modifica los valores de la imágen y listo ^^ ;)
  #10 (permalink)  
Antiguo 02/12/2009, 15:39
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: como centro una imagen?

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.
  #11 (permalink)  
Antiguo 02/12/2009, 15:46
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

Mario, ami si me funciona así. Qué raro....
  #12 (permalink)  
Antiguo 02/12/2009, 15:51
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

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!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #13 (permalink)  
Antiguo 02/12/2009, 16:12
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

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

puedes mostrarme para entender mejor, si quieres enviame mensaje privado.
  #14 (permalink)  
Antiguo 02/12/2009, 16:26
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Pregunta Respuesta: como centro una imagen?

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">
<!-- 
CodigoCodigoCodigo..... -->
</
div
pero aqui me queda el problema que el profesor quiere que sea por CSS y no por capas...

alguna orientacion??

un saludo!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #15 (permalink)  
Antiguo 02/12/2009, 16:34
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

Cita:
Iniciado por HalconVigia Ver Mensaje
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">
<!-- 
CodigoCodigoCodigo..... -->
</
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.
  #16 (permalink)  
Antiguo 02/12/2009, 16:39
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

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!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #17 (permalink)  
Antiguo 02/12/2009, 17:12
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

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:
<img src="imagen.png" width="500" height="350" class="imagen_center" />
  #18 (permalink)  
Antiguo 02/12/2009, 19:25
 
Fecha de Ingreso: enero-2008
Mensajes: 273
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: como centro una imagen?

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
  #19 (permalink)  
Antiguo 02/12/2009, 19:57
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

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.
  #20 (permalink)  
Antiguo 02/12/2009, 22:49
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

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!!

__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #21 (permalink)  
Antiguo 02/12/2009, 22:50
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

una Disculpa duplique el mensaje

creo que pique dos veces....

un saludo!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!

Última edición por HalconVigia; 02/12/2009 a las 22:59 Razón: duplicar post
  #22 (permalink)  
Antiguo 02/12/2009, 23:02
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

Cita:
Iniciado por HalconVigia Ver Mensaje
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.
  #23 (permalink)  
Antiguo 03/12/2009, 12:38
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

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!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
  #24 (permalink)  
Antiguo 03/12/2009, 15:11
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: como centro una imagen?

Hola:

Cita:
Iniciado por HalconVigia Ver Mensaje
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.

  #25 (permalink)  
Antiguo 03/12/2009, 15:17
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: como centro una imagen?

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 ;)

Última edición por PrendekZ; 03/12/2009 a las 15:48
  #26 (permalink)  
Antiguo 13/12/2009, 11:14
 
Fecha de Ingreso: abril-2003
Ubicación: Mexico
Mensajes: 604
Antigüedad: 14 años, 7 meses
Puntos: 23
Respuesta: como centro una imagen?

Buenas!!!

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

un saludo!!
__________________
¡El Respeto al Derecho Ajeno Es la Paz!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:46.