allineamento verticale di una lista orizzontale

**gianiaz** · 15-07-2005, 11:52

So che il titolo è un po' contorto, cercherò di spiegarmi meglio:

ho una lista orizzontale con dentro 2 elementi, un testo e un immagine.

L'immagine è più grande in altezza del testo, e vorrei che testo e immagine fossero centrati nel senso verticale.

Per chiarezza vi mostro il codice:

codice:

<html>
	<head>
		<style type="text/css"> 
			ul
			{
			
			}
			li
			{
				display: inline;
				list-style-type: none;
			}
		</style>
	
	</head>

	<body>
		<ul>
			[*]
				prova
			
			[*]
				[img]prova.png[/img]
			
		[/list]
	</div>
	</body>
	
</html>

ciao e grazie per eventuali risposte

**colde** · 15-07-2005, 12:57

Un bel vertical-align: middle;?

Oppure un bel margin: 0 auto;?

**gianiaz** · 15-07-2005, 13:34

Originariamente inviato da colde
Un bel vertical-align: middle;?

Oppure un bel margin: 0 auto;?

Ho già provato (a metterli nel li), nessuno dei due funziona.

**colde** · 15-07-2005, 15:51

Mi sa che non ho molto chiaro cosa vuoi fare, se ho capito bene però il tuo codice è cannato. Non hai la pagina pubblicata da qualche parte o un esempio per capire meglio?

**gianiaz** · 15-07-2005, 15:58

credo anche io sia cannato... altrimenti non postavo

L'ho messo momentaneamente qui:

http://www.gianiaz.net/Test/prova.html

Ovviamente la pagina non è ben scritta, ho buttato al volo un codice di test...

Grazie per l'interessamento..

ciao

**whiteduke** · 15-07-2005, 16:08

Prima cosa prima di chiuderlo devi anche aprirlo il div

secondo, vedi tu se fare un elenco per il testo e uno per le immagini, terzo prova a vedere qua:
http://www.extrowebsite.com/articolocss.asp?ID=39

Ciao

**colde** · 15-07-2005, 16:13

Ok.
Quindi tu vorresti che l'immagine sia posizionata sopra al testo in modo da creare dei bottoni "guidati"?

Se così fosse, ci sono diverse possibilità.
Prova ad inserire l'immagine all'interno del[*] e insieme il testo accompagnatorio poi pubblica il risultato.

Se invece vuoi il testo con di fianco l'immagine, segui il suggerimento scritto qui sopra e alle classi dei due oggetti (img e testo) gli dai un float. Dimenticavo, aggiungi anche vertical-align: middle o meglio ancora line-height: dimensioneimmaginepx;

**gianiaz** · 15-07-2005, 16:13

Originariamente inviato da whiteduke
Prima cosa prima di chiuderlo devi anche aprirlo il div

secondo, vedi tu se fare un elenco per il testo e uno per le immagini, terzo prova a vedere qua:
http://www.extrowebsite.com/articolocss.asp?ID=39

Ciao

vabbè come avevo detto il codice era una prova, mi sono dimenticato di chiudere il div.
Per il discorso dell'allineamento quell'articolo non dice nulla di ciò che già sapevo...
Non prendermi per un presuntuoso, ma quelle teorie funzionano per i div, ma non riesco ad applicarli alle liste.
Nel peggiore dei casi metterò un div o uno span con allineamento verticale centrato nei li testuali...

Grazie

**colde** · 15-07-2005, 16:20

Cmq, a parte tutto, credo sia sbagliato inserire le due parti (testo e img) in liste separate. Se sono dipendenti tra loro devono stare nello stesso[*].

Sapendo poi l'altezza dell'img puoi inserire il line-height assegnando tale dimensione e dovrebbe metterti il testo centrato verticalmente.

**gianiaz** · 15-07-2005, 16:24

anche secondo me non è il massimo, in pratica devo fare una specie di pulsantiera i cui pulsanti possono essere del testo o delle immagini.

Praticamente "prova" e l'immagine saranno 2 pulsanti diversi che punteranno a due link diversi.

Vorrei che prova fosse allineato verticalmente rispetto all'immagine.

line-height non lo conoscevo, l'ho messo ma sembra ignorarlo..

Ciao

Discussione: allineamento verticale di una lista orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

allineamento verticale di una lista orizzontale

Permessi di invio