No XD eso no, pero haber si entiendo: tu quieres esto? ______________ | | | | | X X | | | |_____________|
asi que he hecho de este modo sin complicaciones ten encuenta que el LI engloba todo por eso creo que la medida mejor darsela al LI que al LABEL <style> * {margin:0; padding:0;} form{ line-height:100%;/*optativo*/ } ul{ list-style: none; width: 220px;line-height:220px;/*centra lista V*/ } li{ width: 70px;line-height:50px;height: 50px;/*centraLI v*/ display: block; float: left; border: 1px solid green; text-aling:center;/* si los quieres en el centro, optativo*/ } img{ vertical-align:middle;}/*importante centra el texto con respecto a la imagen*/ label{ /* label, según el height de la imagen contenida *//*yo los usaria solo para adornos*/ border: 1px solid blue; } label * { border: 1px solid red; } imput{ }</style> Bueno, a ver si asi lo arreglas. El 27/08/07, Gael <[EMAIL PROTECTED]> escribió: > 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 > _______________________________________________ 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