Centrar imagen en un div

Freakme · #1 (**permalink**) 18/03/2011, 04:08

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.

mtreik · #2 (**permalink**) 18/03/2011, 06:45

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

Un saludo

Freakme · #3 (**permalink**) 18/03/2011, 10:59

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.

kseso? · #4 (**permalink**) 18/03/2011, 14:35

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.

Freakme · #5 (**permalink**) 21/03/2011, 03:16

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