menu: allineamento verticale dei testi

[darkiko]

giorno gente

cerco di spiegarmi al meglio:

ho un menu verticale
questo menu è composto da blocchi colorati alti uguali (70px), ognuno contenente ovviamente una voce diversa.
i testi di questi link dovrebbero essere centrati verticalmente
le scritte sono piuttosto grandi e io non posso sapere di quante righe saranno composti

se inserisco i vari <a> di questo menu all'interno dei punti di un elenco in cui assegno ai[*] i 70px d'altezza, i colori etc... non riesco a farli centrare verticalmente e tra l'altro se a questi <a> imposto il display:block oltre a non centrarsi comunque (ripeto che non sapendo il numero di righe da cui sono composti non posso saperne l'altezza), i vari[*] anche se imposto tutti i margin a 0 in IE lasciano tra loro uno spazio che non dovrebbe esserci.
se non metto i miei <a> dentro un elenco ma li metto solo come block assegnando a loro i 70px d'altezza, i colori di sfondo etc... non riesco comunque a centrarne le scritte verticalmente

come caspita posso fare?

insomma, io vorrei riuscire a realizzare una roba così

grazie

[Mich_]

Alt un attimo. Un minimo di teoria.

Gli elementi[*] son elementi di tipo blocco, gli <a> sono di tipo inline.
Nel tuo caso pero` devi trasformare gli <a> in blocco, e farli occupare tutto lo spazio del[*].
Poi puoi centrare il testo all'interno degli <a>, con align e vertical-align.
Per sistemare le celle a piu` righe, puoi giocare anche con il line-height.

Quindi:

li {
  margin:0; padding:0;
  list-style-tyoe: none;
}
li a {
  display: block;
  width: 100%; height: 100%;
  line-height: 1.2em;
  text-align: center;
  vertical-align: middle;
}

Se non funziona bene, puo` convenire inserire un

all'interno dell'<a>, che andra` quindi centrato con margin: auto;

Eventuali spazi di IE andranno corretti dopo con opportuni commenti condizionali

[darkiko]

#menu ul, #menu li{
list-style-type:none;
margin:0;
padding:0;
}
#menu li{
height:70px;
border-bottom:1px solid #fff;
text-align:center;
}
#menu li a{
text-decoration:none;
display:block;
width:100%; 
height:100%;
text-align:center;
vertical-align:middle;
}
#menu li a p{
font-size:16px;
color:#fff;
font-weight:bold;
margin:auto;
}

<ul>
<li id="..."><a href="#">

CHI SIAMO</p></a>
<li id="..."><a href="#">

BLA BLA BLA</p></a>
<li id="..."><a href="#">

BLA BLA BLA</p></a>
<li id="..."><a href="#">

BLA BLA BLA</p></a>
<li id="..."><a href="#">

BLA BLA BLA</p></a>
<li id="..."><a href="#">

BLA BLA BLA</p></a>[/list]

con FF e Opera non centra i p verticalmente, con IE invece funziona tutto bene.. e questo mi fa capire di aver sicuramente toppato qualcosa
l'unico difetto con IE è che rende più alti i[*] col testo su più righe, ma sarebbe l'ultimo dei problemi

ho provato anche ad aggiungere
margin:0; padding:auto 0 auto 0; agli "a", non si sa mai ma niente

[AnFrusch@pepp]

Il vertical align è utilizzabile solo in alcuni casi (non questo), poichè è applicabile solo al contenuto di una cella (<td>).. potresti usare il display: table-cell per emulare una cosa del genere, ma non sono sicuro del risultato.. in alternativa con il padding o line-height.

[ilario83]

io di solito faccio così:

#menu li{
height:40px;
padding-top: 30px;
border-bottom:1px solid #fff;
text-align:center;
}

[darkiko]

Originariamente inviato da AnFrusch@pepp
Il vertical align è utilizzabile solo in alcuni casi (non questo), poichè è applicabile solo al contenuto di una cella (<td>).. potresti usare il display: table-cell per emulare una cosa del genere, ma non sono sicuro del risultato.. in alternativa con il padding o line-height.

mettendo il table-cell fa una cosa strana:
non li centra comunque verticalmente
ma alcune voci, quelle su una riga sola, non le centra più neanche orizzontalmente

[darkiko]

Originariamente inviato da ilario83
io di solito faccio così:

se ho capito bene, in questo caso non li centra verticalmente... o meglio.. potrei cercare una misura in px per far sì che quelli su una riga sola siano centrati, ma quelli su 3 righe non lo sarebbero... a meno che non imposti anche un padding-bottom uguale, ma a quel punto quel[*] con tante righe di testo rischierebbe di diventare alto il doppio degli altri...

[darkiko]

ma scusatemi
indipendentemente dal vertical align che funzioni o meno..

perché al p a cui ho dato il margin:auto , non si piazza verticalmente nel a (che adesso è blocco) che lo contiene? :master:

[AnFrusch@pepp]

Originariamente inviato da darkiko
ma scusatemi
indipendentemente dal vertical align che funzioni o meno..

perché al p a cui ho dato il margin:auto , non si piazza verticalmente nel a (che adesso è blocco) che lo contiene? :master:

indipendentemente dall'elemento block o meno, leggevo giusto ieri che il vertical-align è definibile solo con elementi 'cella' o per impostare elementi 'inline'.
Un'idea che potrei suggerirti è l'utilizzo di un'immagine di sfondo al tuo elemento 'a'. Ci sono dei tutorial circa il come realizzare un buon image replacement. Se non ricordo male anche su questo sito.

[darkiko]

Originariamente inviato da AnFrusch@pepp
indipendentemente dall'elemento block o meno, leggevo giusto ieri che il vertical-align è definibile solo con elementi 'cella' o per impostare elementi 'inline'.
Un'idea che potrei suggerirti è l'utilizzo di un'immagine di sfondo al tuo elemento 'a'. Ci sono dei tutorial circa il come realizzare un buon image replacement. Se non ricordo male anche su questo sito.

intanto grazie per il supporto

a parte il vertical-align
a logica, se io ho un p contenuto in un elemento block, e a questo p do margin:auto, si dovrebbe centrare anche verticalmente no? perché questo non lo fa? perché non ha misure definite? non credo... mmhh :master:

sull'immagine di sfondo, non riesco a capire.. come mi potrebbe aiutare per risolvere questo problema?
di image-replacement in giro ne ho visti un po' di niente male, ma purtroppo non ne ho trovati che mi aiutino in questa situazione