Gracias por tu ayuda, Jaume!
He trabajado un poco a partir de tu código. Va bastante bien y, de
hecho, puedo una única lista para toda la "tabla", así que no haría
falta una lista para cada "fila", ya que los <li> tienen el float: left.
Con tu código consigo centrar verticalmente el contenido de cada <li>
por separado: el input type="radio" y su img correspondiente (ambos
dentro de un label) aparecen centrados verticalmente.
De todas formas, no se centra verticalmente el conjunto de la lista.
Supongo que habría que hacerlo elemento a elemento, según el tamaño que
vaya a tener cada uno.
Como me explico bastante mal, pongo el ejemplo (los tamaños son lo de
menos y los bordes son para verlo más claro). Sólo hace falta una imagen
que se llame r.gif para el ejemplo:
CSS:
* {margin:0; padding:0;}
ul{
list-style: none;
width: 220px;
}
li{
width: 70px;
height: 50px;
display: block;
float: left;
border: 1px solid green;
}
label{
position: relative;
top: 25px; /* esto tendría que ser diferente para cada */
margin-top: -25px; /* label, según el height de la imagen contenida */
display:block;
border: 1px solid blue;
}
label * {
vertical-align: middle;
border: 1px solid red;
}
HTML:
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li><label for="a1"><input type="radio" id="a1" /><img src="r.gif"
width="15" height="15" alt="..." /></label></li>
<li><label for="a2"><input type="radio" id="a2" /><img src="r.gif"
width="15" height="15" alt="..." /></label></li>
<li><label for="a3"><input type="radio" id="a3" /><img src="r.gif"
width="15" height="25" alt="..." /></label></li>
<li><label for="a4"><input type="radio" id="a4" /><img src="r.gif"
width="15" height="20" alt="..." /></label></li>
<li><label for="a5"><input type="radio" id="a5" /><img src="r.gif"
width="35" height="15" alt="..." /></label></li>
<li><label for="a6"><input type="radio" id="a6" /><img src="r.gif"
width="15" height="15" alt="..." /></label></li>
<li><label for="a7"><input type="radio" id="a7" /><img src="r.gif"
width="20" height="20" alt="..." /></label></li>
<li><label for="a8"><input type="radio" id="a8" /><img src="r.gif"
width="15" height="15" alt="..." /></label></li>
</ul>
</fieldset>
</form>
Visto lo visto, si nadie sabe de una solución mágica (o de una forma
diferente de marcar el conjunto de radiobuttons horizontal), me veré
obligado a maquetarlo con tablas ;-)
Un saludo!
Gael
jaume op escribió:
> Deberias dar medidas pero mira asi:
>
> <style>
> * {margin:0; padding:0;}
>
> ul{ /*creo la tabla*/
> display:block;
> width:600px;
> list-style:none;
> }
> li{ /*medidas para las "celdas"*/
>
> width:150px;
> height:50px;
> display:blok;
> float:left;
> line-height:100%;
> }
> img{
> vertical-align:middle;
> }
> </style>
> /*******************************************************************************/
> <ul>
> <li><label for="..."><input type="radio" id="input" name... />
> bonito bonito<img
> src="Mis imágenes/mail.jpg"alt="..." /></label>
> </li>
> </ul>
> <ul>
> <li><label for="..."><input type="radio" id="input" name... />
> bonito bonito<img
> src="Mis imágenes/mail.jpg"alt="..." /></label>
> </li>
> </ul>
> Pon tantas Ul como filas y los LI como columnas (por ejemplo 4ul y 5
> li), para hacer una tabla de 4 columnas y cinco filas.
>
>
>
> El 27/08/07, Gael <[EMAIL PROTECTED]> escribió:
>
>> Gracias a ambos por vuestras respuestas.
>>
>> Funcionan, pero no me sirven , porque olvidé deciros que tengo que
>> darles un ancho y un alto a todos los li para que queden cuadriculados.
>> Es decir, tengo una cuadrícula con n input type="radio", que se van
>> colocando, haya los que haya, de izquierda a derecha y de arriba a abajo
>> en una lista horizontal en que caben cuatro inputs por fila (quedan
>> dispuestos como si fuera una tabla, pero no son datos tabulares, son una
>> lista de opciones para escoger una). Por eso quiero que me queden
>> centrados verticalmente el input y el img dentro del label.
>>
>> Gracias de nuevo
>>
>> Un saludo
>>
>>
>> Gael
>>
>>
>> jaume op escribió:
>>
>>> Se me ocurre una cosa asi rápida, dale esto a la imagen:
>>> img{
>>> vertical-aling:middle;
>>> } ; a mi me funciona
>>> Saludos
>>> para ajustarlo mejor juega con los padding del input.
>>> El 27/08/07, Gael <[EMAIL PROTECTED]> escribió:
>>>
>>>
>>>> Hola!
>>>>
>>>> Estoy maquetando un formulario que, entre otras cosas contiene una lista
>>>> horizontal de radiobuttons. El contenido de éstos no siempre tiene la
>>>> misma altura (son imágenes, con distintos heights). Lo he intentado de
>>>> mil maneras, pero no lo consigo.
>>>>
>>>> El HTML vendría a ser éste:
>>>>
>>>> <fieldset>
>>>> <legend>...</legend>
>>>> <ul>
>>>> <li><label for="..."><input type="radio" id="..." name... /><img
>>>> src="..." alt="..." /></label></li>
>>>> <li><label for="..."><input type="radio" id="..." name... /><img
>>>> src="..." alt="..." /></label></li>
>>>> [...]
>>>> </ul>
>>>> </fieldset>
>>>>
>>>> Así que se todo reduce a centrar verticalmente el input y el img dentro
>>>> del label. Debería ser posible, no?
>>>>
>>>> Gracias y un saludo!
>>>>
>>>>
>>>> Gael
>>>>
>>>>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
