Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] alinear verticalmente imagen

Estas en el tema de alinear verticalmente imagen en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 26/11/2014, 16:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
alinear verticalmente imagen

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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #2 (permalink)  
Antiguo 28/11/2014, 21:01
 
Fecha de Ingreso: septiembre-2012
Mensajes: 74
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: alinear verticalmente imagen

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
  #3 (permalink)  
Antiguo 01/12/2014, 06:05
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: alinear verticalmente imagen

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 original
  1. ul#list-opc > li {
  2.     height: 16em;
  3.     background-color: rgb(244, 244, 243);
  4.     border: 1px solid rgb(219, 218, 218);
  5.     border-top: 1px solid rgb(155, 151, 151);
  6.     display: none;
  7. }
  8.  
  9.  
  10.  
  11. ul#list-opc > li > img {
  12.     width: auto;
  13.     max-height: 14em;
  14.     max-width: 20em;
  15.     padding-left: 1%;
  16.     top: 50%;
  17.     transform: translate(0,-50%);
  18.     -webkit-transform: translate(0,-50%);
  19.     -ms-transform: translate(0,-50%);
  20. }
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: alinear, background, color, html, verticalmente, width
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 22:09.