display:inline ul

[bid]

Hola

tengo una imagen y una lista dentro de un div.

quiero que la lista aparezca a la derecha de la imagen y ambos esten centrados verticalmente. este div contendria tambien mas parejas imagen-lista.


he usado display:inline para ul pero no funciona.

¿como debo hacerlo?

gracias

[hectorborges]

Creo que debes agregar algunos elementos extra para lograr centrar ambos elementos verticalmente,algo como esto para cada pareja imagen-lista:

Código HTML:

<div class="contenedor">
   <div class="vertAlign">
      <img src="url_imagen" />
    </div>
    <div class="vertAlign">
       <ul>
          <li>Prueba</li>
       </ul>
    </div>
</div> 

Lo único que debes hacer es crear la clase css .vertAlign con display:table-cell y vertical-align:middle. Eso será suficiente para que el contenedor adapte su altura al objeto más grande (la lista o la imagen) y el más pequeño se centre verticalente respecto al primero.

La clase .contenedor que coloqué sería la que definiría la relación de posicionamiento entre las parejas de imagen-lista. Supongo que lo que estás haciendo es una especie de catálogo y quizas te convenga hacerles un float:left para que se apilen hasta que quepan a lo ancho y colocarles algun border y margin para que se diferencien de los otros pares.

Espero te sea de ayuda,

Hector Borges

[Jamati]

Lo único que debes hacer es crear la clase css .vertAlign con display:table-cell y vertical-align:middle

Ten cuidado porque me parece que eso no funciona en IE6

[hectorborges]

cierto... tampoco en IE7... ¿cuando será que corrijan el bug del height y se apegarán a estándares?.... sorry por no verificar antes de enviartelo... se puede usar cualquiera de los multiples hacks para centrar verticalmente en IE para lograrlo o sencillamente colocar la imagen y la lista dentro de una tabla de 1 fila x 2 columnas supongo... es tan molesto tener que programar dos veces por culpa de IE jejeje.....

Gracias por la verificación Jamati,

Héctor

[Mikmoro]

Bueno, de hecho ni siquiera funcionará para los navegadores standard, a no ser que le pongas display:table a la clase .contenedor.