Foros del Web » Creando para Internet » CSS »

Centrar imagen en un div

Estas en el tema de Centrar imagen en un div en el foro de CSS en Foros del Web. Buenos días, aunque hable de una galeria que se genera mediante php, creo que mi problema es de css, por eso lo pongo aquí, si ...
  #1 (permalink)  
Antiguo 18/03/2011, 05:08
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Centrar imagen en un div

Buenos días, aunque hable de una galeria que se genera mediante php, creo que mi problema es de css, por eso lo pongo aquí, si estoy equivocado, por favor movedme al foro adecuado.

Tengo un problema que no consigo resolver y que me tiene perplejo.

Genero una galeria mediante php cuya estructura es:
- una lista a la izquierda donde estan los thumbs de las imagenes anteriores
- un div en el centro que contiene la imagen que se está mostrando
- otra lista a la derecha que contiene los thumbs de las imagenes siguientes.

mi problema está en que en el div se muestra una imagen "grande" que puede ser horizontal o vertical pero que no consigo que aparezca centrada cuando genero la galeria mediante php. En cambio copio y pego el codigo en un archivo aparte y sí que se centra la imagen.

¿¿Alguna idea??

Gracias.
  #2 (permalink)  
Antiguo 18/03/2011, 07:45
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: Centrar imagen en un div

Ahora mismo no se porque se podría causar, si nos indicas el código fuente podría intentar ayudarte.

Un saludo
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #3 (permalink)  
Antiguo 18/03/2011, 11:59
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Centrar imagen en un div

HTML
Código:
<html>
<head>
    <link href="contenidos.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="contenedor">
    <div id="menu"></div>

    <div id='contenido'>

        <div id='galeria_fotos'>

>>> columna anterior

            <ul id='fotos_anteriores'>
                <li><img src='images/primera.jpg' /></li>
            </ul>

>>> imagen principal

            <div id='imagen_principal'>
                   <a href='fotos/zoom/foto1.jpg' class='zoom'>
                       <img src='fotos/foto1.jpg' />
                   </a>
             </div>

>>> columna posterior

            <ul id='fotos_siguientes'>
                   <li><img src='fotos/small/foto2.jpg' title='foto2.jpg' /></li>
                   <li><img src='fotos/small/foto3.jpg' title='foto3.jpg' /></li>
            </ul>


        </div>
    </div>

    <div id="pie"></div>

</div>

</body>

</html>
CSS
Código:
ul#fotos_anteriores, ul#fotos_siguientes {
    padding: 0px;
    margin: 0px;
    float: left;
    width: 110px;
    list-style-type: none;
    background-image: url('images/fondo_gris.png');
    background-repeat: repeat;
    overflow: hidden;
}

ul#fotos_anteriores li, ul#fotos_siguientes li {
    margin: 5px 0px;
    text-align: center;
    
}

div#imagen_principal {
    width: 800px;
    height: 500px;
    margin: 0px 15px;
    float: left;
    text-align: center;
}

div#imagen_principal img {
    margin: 0px auto;
}
La cuestión es que puesto así, en plano, funciona correctamente. Pero es que es una galeria que genero de forma dinámica según las fotos que se suban y se guardan en una base de datos, y precisamente al generarlo mediante php es cuando falla, excepto en internet explorer que va bien :S

En IE funciona por "text-align: center;"

Y en el resto debiera funcionar con "margin: 0px auto;" pero no es el caso...y no entiendo por qué.

Un saludo.
  #4 (permalink)  
Antiguo 18/03/2011, 15:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar imagen en un div

Si el código sólo sí funciona bien, como debería, y al incluirlo con más códigos aparece algún efecto no deseado, está claro que hay alguna propiedad de css que por herencia lo provoca.

Descartando que no haya error en el etiquetado html.

Para ver lo primero, nada como firebug.
Para ver lo segundo, validar el código.

Y con los códigos facilitados no se puede reproducir su galería por insuficientes. Debería facilitar un enlace a la página del problema.
  #5 (permalink)  
Antiguo 21/03/2011, 04:16
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Centrar imagen en un div

Gracias por vuestra ayuda, estoy usando el zoomy, un efecto jquery para hacer zoom sobre la imagen y el problema estaba ahí, cuando le daba margenes a la imagen interferían con el script.
Al final lo he solucionado de otra forma, la comento por si a alguien le puede servir alguna vez (aunque sea un poco cogida con pinzas... jejeje):

Primero saco el ancho de la foto
list($ancho_foto) = getimagesize("$ruta_foto");

luego calculo para un ancho de 800px (que es el ancho máximo que he destinado a la foto) cual sería el margen que debería tener
$calculo_margen = (800 - $ancho_ppal)/2;

declaro un style con el ancho de la imagen y el margen que he calculado antes, redondeandolo hacia abajo
$margen_ppal = "style='width: $ancho_ppal" . "px" . "; margin: 0px " . round($calculo_margen, 0, PHP_ROUND_HALF_DOWN) . "px;'";

al final aplico este style al div que contiene la foto.

Un saludo :D

Etiquetas: Ninguno
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 08:20.