[SOLUCIONADO] alinear verticalmente imagen

IsaBelM · #1 (**permalink**) 26/11/2014, 16:38

no sé por qué razón en ie y opera no alinea verticalmente la imagen de la izquierda

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8">
<title></title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
}



html {
    width: 100%;
    height: 100%;
}



body {
    font-size: 100%;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    background-color: rgb(244, 244, 243);
    overflow-y: hidden;
}


div#contenedor {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 40px;
}


ul#list-opc {
    width: 70%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}



ul#list-opc > li {
    height: 16em;
    line-height: 16em;
    background-color: rgb(244, 244, 243);
    border: 1px solid rgb(219, 218, 218);
    border-top: 1px solid rgb(155, 151, 151);
    display: none;
}



ul#list-opc > li > img {
    width: auto;
    max-height: 14em;
    max-width: 20em;
    vertical-align: middle;
    padding-left: 1%;
}


ul#list-opc > li.mostrar {
    display: list-item;
}


div.leyenda {
    width: 50%;
    height: 90%;
    float: right;
    top: 5%;
    right: 1%;
    background-color: rgb(244, 242, 242);
    color: rgb(166, 62, 62);
    font: bold .8em Verdana;
    border-radius: 10px 0 0 10px;
}


div.leyenda > div {
    margin: 1% .5% 1% 2%;
}

div.leyenda > div > span {
    width: 30%;
    display: inline-block;
    color: rgb(92, 87, 87);
}


div.leyenda > div.miniImagen {
    margin: 10% .5% 0 2%;
    padding-top: 1%;
    border-top: 1px solid rgb(179, 177, 177);
}


div.leyenda > div.miniImagen > span.enunciado {
    display: block;
    clear: both;
    width: 100%;
}


div.leyenda > div.miniImagen > img.med {
    width: auto;
    max-height: 5em;
    border: 2px solid rgb(189, 184, 184);
}


div.leyenda > div.miniImagen > img.big {
    width: auto;
    max-height: 6em;
    margin: 3% 0 0 4%;
    border: 2px solid rgb(189, 184, 184);
}
</style>
</head>
<body>

<div id="contenedor">
    <ul id="list-opc">
        <li class="mostrar">
            <img src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/minecraft2.jpg">
            <div class="leyenda">
            <div>
                <span>Título</span> Uno cualquiera</div>
                <div><span>Álbum</span> Uno cualquiera</div>
                <div><span>Duración</span> 300 segundos</div>
                <div class="miniImagen">
                    <span class="enunciado">Otras Referencias</span>
                    <img class="med" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/minecraft2.jpg">
                    <img class="big" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/minecraft2.jpg">
                </div>
            </div>
        </li>
        <li class="mostrar">
            <img src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/inocente.jpg">
            <div class="leyenda">
            <div>
                <span>Título</span> Uno cualquiera</div>
                <div><span>Álbum</span> Uno cualquiera</div>
                <div><span>Duración</span> 300 segundos</div>
                <div class="miniImagen">
                    <span class="enunciado">Otras Referencias</span>
                    <img class="med" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/inocente.jpg">
                    <img class="big" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/inocente.jpg">
                </div>
            </div>
        </li>
    </ul>
</div>


</body>
</html>

gracias

waltersele · #2 (**permalink**) 28/11/2014, 21:01

Hola Isabel, la verdad es que no puedo ayudarte mucho porque no tengo ni opera ni i.e en mi pc, pero la he visto en firefox y safari.

Quizá alguna de las propiedades que utilizaste no son compatibles con estos navegadores, esta página es muy buena para determinar si son las versiones de los navegadores los causantes de tus problemas.

www.caniuse.com

Por otro lado, mirando tu código no he sabido muy bien determinar qué es, pero sin duda seria mejor hacer un diseño más flexible por el tema de las diferentes resoluciones en que pueda ser visto..

Si no conoces display:flex, te invito a que le eches un vistazo... te puede ahorrar mucho trabajo

Un saludo

IsaBelM · #3 (**permalink**) 01/12/2014, 06:05

gracias por tomar el tiempo en atender a mi problema

no es un problema de compatibilidad

este es un ejemplo muy abreviado. la adaptación a distintas resoluciones y dispositivos está resulto. no viene al caso usar flexbox, más cuando busco compatibilidad

una de las soluciones es esta

Código HTML:

Ver originalul#list-opc > li {
    height: 16em;
    background-color: rgb(244, 244, 243);
    border: 1px solid rgb(219, 218, 218);
    border-top: 1px solid rgb(155, 151, 151);
    display: none;
}
 
 
 
ul#list-opc > li > img {
    width: auto;
    max-height: 14em;
    max-width: 20em;
    padding-left: 1%;
    top: 50%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
}