allineamento verticale: Radio button e testo.

[emnlmn]

Salve ragazzi.
da ieri stò sbattendo la testa contro un problema apparentemente alquanto banale ma che invece a me risulta irrisolvibile (almeno nel modo in cui voglio).
brevemente, devo allineare orizzontalmente dei radio button al loro testo associato.
i radio button sono inseriti in elenco uno sotto l'altro in un box a larghezza fissa.

il problema nasce quando il testo associato a ciascun radio button supera la larghezza del box e va a disporsi nella riga sotto, producendo un antiestetico effetto!
Il comportamento che vorrei invece ottenere è quello che si otterrebbe inserendo i radio button nella prima colonna di una tabella e la descrizione associata nella seconda, impostando il vertical align delle celle a middle.

solo che io NON voglio utilizzare una tabella .

Le ho provate tutte, ma non riesco ad ottenere quello che voglio semplicemente usando un <ul> e lavorando con i css !

vi posto il codice che vorrei usare e quello con l'utilizzo della tabella (che ha il risultato grafico che vorrei ottenere)

<div id="poll">
  <div class="title"><h4>Sondaggio corrente</h4></div>
  

Domanda del sondaggio</p>
  <form method="post" action=""> 
    <ul>[*]<input type="radio" name="currentPollRadio" id="PollId1" value="1" /><label for="pollId1">testo del sondaggio su due linee</label>
      [*]<input type="radio" name="currentPollRadio" id="pollId2" value="2" /><label for="pollId2">testo del sondaggio su due linee</label>
      [*]<input type="radio" name="currentPollRadio" id="pollId3" value="3" /><label for="pollId3">testo su una linea</label>
      [*]<input type="radio" name="currentPollRadio" id="pollId4" pollvalue="4" /><label for="pollId4">testo su una linea</label>
      [/list]
  </form>
</div>

<table summary="poll">
  <tr>
    <td><input type="radio" name="currentPollRadio" id="PollId1" value="1" /></td>
    <td>testo del sondaggio su due linee</td>
  </tr>
  <tr>
    <td><input type="radio" name="currentPollRadio" id="pollId2" value="2" /></td>
    <td>testo del sondaggio su due linee</td>
  </tr>
  <tr>
    <td><input type="radio" name="currentPollRadio" id="pollId3" value="3" /></td>
    <td>testo su una linea</td>
  </tr>
  <tr>
    <td><input type="radio" name="currentPollRadio" id="pollId4" 4" /></td>
    <td>testo su una linea</td>
  </tr>
</table>

ed ecco invece il css associato (per entrambi gli spezzoni xhtml)

#poll {
   float:left;
	margin:0;
	padding:0;
	width:158px;
}

#poll ul {
	margin:0;
	padding:0;
	list-style:none;
}

#poll li {
   overflow:hidden;
	margin-bottom:4px;
	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:14px;
}

#poll p {
   margin:5px 0 0 5px;
	padding:0;
	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:14px;
	color:#000;
	background-color:transparent;
}

#poll form {
	margin:17px 0 0 4px;
	padding:0;
}

#poll table {
	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

come ho già detto ne ho provate di tutte, rendere flottanti label e input, impostare margini, visualizzarli a livello di blocco, vertical align...
ma il risultato con la semplice tabella è irriproducibile

[ricman]

Originariamente inviato da emnlmn
il vertical align delle celle a middle.

Forse non capito il problema... (e ovviamente non sto a riscrivere tutto quel codice...)
Quell'effetto lo ottieni dando un height e un line-height uguali

[Penny66]

prova cosi:

<div style="clear:left;">
	<div style="float:left; width:50px;"><input type="radio"></div>
	<div style="float:left;width:100px;">descrizione descrizione scrizione</div>
</div>

[emnlmn]

@richman:
intendevo dire che il contenuto delle varie celle è inserito verticalmente al centro della cella stessa.

una cosa che prima non avevo detto è che volevo rendere la struttura "flessibile", potendo cambiare il testo e mantenere l'allineamente corretto senza modificare ogni volta eventuali margini e padding.
E siccome non posso sapere a priori la qantità del testo non posso nemmeno impostare un height.
altrimenti sarebbe stato tutto più facile!

@Penny66
Metodo già provato.
Risolve solamente metà del problema, cioè non permette al testo di andare a capo su una nuova linea ma diciamo resta nella "colonna giusta".
resta però il problema di allineare verticalmente i due div, che ripeto non posso sapere a priori quanto è, quindi niente margin-top per il radio...

[emnlmn]

alla fine ho dovuto per forza usare una tabella...

speriamo che in css3 siano implementati sistemi migliori per posizionare verticalmente gli elementi di blocco... o forse sono già state definite queste specifiche?

[graffithouse]

ri-tiro fuori questa discussione per una domanda strana....


ma per allieare un div vertcalmente ed orizontalmente al centro, su può realizzare solo creando una cella di una tabella e dandogli valing ?

[ricman]

Originariamente inviato da graffithouse
ma per allieare un div vertcalmente ed orizontalmente al centro, su può realizzare solo creando una cella di una tabella e dandogli valing ?

E' scritto qui (mi pare che i primi 6 risultati siano buoni...)

[graffithouse]

grazie trovato qiello che cercavo


questo