allineamento verticale middle x cella

[i_am_antipop]

non riesco ad allineare in verticale al centro il testo di una cella...

cosa sbaglio?
tnx


td.menu a {
background-color: #00308F;
text-align: center;
text-decoration: none;
font-family: bold Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
display:block;
width: 108;
height:100%;
line-height:1;
vertical-align: middle;
}

td.menu a:hover {
color: #FFFFFF;
background: #95B1FF;
display:block;
}

[i_am_antipop]

qualche idea?

tnx

[Mich_]

Per poterti rispondere e` necessario conoscere il codice HTML cui si riferisce il CSS.

Tu parli di testo, ma quel CSS non si riferisce al testo, ma solo ai link contenuti nelle celle di tabella con classe .menu

[i_am_antipop]

Originariamente inviato da Mich_
Per poterti rispondere e` necessario conoscere il codice HTML cui si riferisce il CSS.

Tu parli di testo, ma quel CSS non si riferisce al testo, ma solo ai link contenuti nelle celle di tabella con classe .menu

in effetti per testo intendevo il link (testuale) contenuto nella cella.

Il codice HTML è questo:

<table border="0" cellspacing="0" cellpadding="0" height="24" width="562">
          <tr>
            <td class="menu" width="9"></td>
            <td class="menu"><a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide');">
              CIAOCIAO</a></td>
            <td width="3"></td>
            <td class="menu"><a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide');">
              SYSTEM</a></td>
            <td width="3"></td>
            <td class="menu"><a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide');">
              CIAO</a></td>
            <td width="3"></td>
            <td class="menu"><a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide');">MAPPA
              </a></td>
            <td width="3"></td>
            <td class="menu"><a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide');">CONTACT 
             </a></td>
          </tr>
        </table>

[Mich_]

Quindi tu vuoi centrare il testo all'interno di un <td>.
Il link non c'entra, dato che non e` un blocco.

td.menu {
text-align: center;
vertical-align: middle;
}

E togli il dispaly:block; dal link, nonche` tutti gli attributi di posizionamento.



Oppure devi centrare il "blocco" <a> dentro il <td>:
td.menu a {
margin: auto;
display: block;
}
(funziona per browser conformi, per IE devi lasciare l'allineamento nel blocco superiore).

[i_am_antipop]

quindi così? nn mi funziona...

td.menu a {
background-color: #00308F;
text-align: center;
text-decoration: none;
font-family: bold Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;

padding-top: 1px;
width: 108;
height:100%;
line-height:1;
text-align: center;
vertical-align: middle;

}

td.menu a:hover {
color: #FFFFFF;
background: #95B1FF;
}

[i_am_antipop]

se tolgo


height:100%;


funziona, ma così non ripempie più tutta la cella di colore...

[Mich_]

No, devi centrare il contenuto del <td>, non dell'<a>

[i_am_antipop]

quindi così?

td.menu { 
	text-align: center; 
	vertical-align: middle;
} 

td.menu a { 
	
	text-decoration: none;  
	background-color: #00308F; 
	font-family: bold Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	color: #FFFFFF; 
	width: 108;
	height: 100%;
	line-height:1; 

} 

td.menu a:hover { 
	color: #FFFFFF; 
	background: #95B1FF;
}

...ma non funge:

con height: 100%; vedo tutto allineato in alto, MA con lo sfondo uniforme e corretto

senza height: 100%; vedo tutto allineato al centro, MA il colore non è in tutta lo sfondo della cella.

ho provato anche a spostare height: 100%; in <td>...

[Mich_]

Si, ma height e width non hanno senso in un elemento inline.

La soluzione corretta secondo il W3C sarebbe:
<td class="menu" href="..." onmouseover="..." onmouseout="...">
(dove href potrebbe essere opzionale nel tuo caso) e centrando poi il testo all'interno del <td> .

Ancora meglio con i CSS (visto che il link non ti serve):
td.menu {
...
}
td.menu:hover {
...
}
senza quindi il tag <a>.

Purtroppo il supporto a queste cose e` molto scarso nei browser piu` diffusi.



In alternativa:
<td class="menu"><a href ...>parole</a></td>

con
td.menu a {
display: block;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
text-decoration: none;
background: #00308F;
color: #FFFFFF;
}
td.menu a:hover {
color: #FFFFFF;
background: #95B1FF;
text-decoration: none;
}
Che e` all'incirca quello che avevi fatto, ma width e height del tag <a> sono ambedue al 100%.

Puoi anche provare a inserire le scritte dentro un elemento tipo

e poi centrare tale elemento dentro <a>.