Foros del Web » Creando para Internet » CSS »

Centrar imagenes

Estas en el tema de Centrar imagenes en el foro de CSS en Foros del Web. Hola a todos, necesito centrar las imagens dentro del div. este es el css que tengo. Código PHP: #div_articulos{      height : 150px ;      ...
  #1 (permalink)  
Antiguo 20/02/2011, 12:45
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 16 años, 9 meses
Puntos: 5
Centrar imagenes

Hola a todos, necesito centrar las imagens dentro del div.
este es el css que tengo.
Código PHP:
#div_articulos{
    
height:150px;
    
width:150px;
    
floatleft;
    
font-size10px;
    
background-color#F2F2F2;
    
border3px double #666;
    
text-aligncenter;
    
margin-right3px;
    
overflow-xhidden;
    
overflow-yhidden;
    
vertical-alignmiddle;

Aqui muestra una imagen de 300x* px pero me muestra la imagen alienada a la izquierda.

Lo que necesito es centrar la imagen horizontalmente.
  #2 (permalink)  
Antiguo 20/02/2011, 14:30
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 13 años, 11 meses
Puntos: 2
Respuesta: Centrar imagenes

quizá un margin: 0px auto; solucione el problema
  #3 (permalink)  
Antiguo 20/02/2011, 17:26
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 16 años, 9 meses
Puntos: 5
Respuesta: Centrar imagenes

Pues deberia, pero no me las centra....
  #4 (permalink)  
Antiguo 20/02/2011, 17:39
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 3 meses
Puntos: 64
Respuesta: Centrar imagenes

dale proba con el margin left ,sacale el margin right
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 20/02/2011, 17:43
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 16 años, 9 meses
Puntos: 5
Respuesta: Centrar imagenes

tampoco.
Dentro del DIV sale una imagen, es esa la que quiero centrar, no quiero centrar el DIV, si no la imagen que está dentro del div.
  #6 (permalink)  
Antiguo 20/02/2011, 18:23
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 3 meses
Puntos: 64
Respuesta: Centrar imagenes

Cita:
Iniciado por visona Ver Mensaje
tampoco.
Dentro del DIV sale una imagen, es esa la que quiero centrar, no quiero centrar el DIV, si no la imagen que está dentro del div.
entonces proba poniendo otro div para la iamgen, y movelo a ese..

o de ultima ...

<center></center> a la imagen en el html
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #7 (permalink)  
Antiguo 20/02/2011, 18:30
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Centrar imagenes

La posibilidad más simple es colocar la imagen (center.jpg en el jemplo) como fondo del div añadiendo las propiedades siguientes a la regla #div_articulos:
background-image: url("center.jpg");
background-position: center center;
Si la imagen fuese más pequeña que el div se puede añadir background-repeat:no-repeat para que se muestre sólo una vez.
  #8 (permalink)  
Antiguo 21/02/2011, 07:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Centrar imagenes

Tiene un contenedor (div) de unas medidas conocidas y fijas /height:150px;width:150px;/ y ademas ya ha prevenido que no haya desbordamientos /overflow-x: hidden;overflow-y: hidden; overflow:hidden/

Ahora quiere colocar un elemento (imagen) en una determinada posición de su caja. La medida de la imagen en la coordenada que quiere posicionar la conoce a priori (300px)

Pues el camino más evidente que encuentro es posicionar de forma absoluta la imagen y con las propiedades top/left colocarla. Es un simple cálculo matemático.
Recuerde que las propiedades top-right-bottom-left admiten valores negativos.

Etiquetas: imagenes
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




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