Posizionamento verticale Hyperlink

[motogpdesmo16]

Buongiorno,
sono alle prese con la realizzazione di un sito web in linguaggio ASP.NET.
La mia esigenza è questa: devo posizionare verticalmente e in maniera centrata un oggetto hyperlink, contraddistinto sempre da un'immagine, in un div.

Attualmente ho questa situazione:

e vorrei ottenere questo risultato:


La definizione, lato HTML, degli oggetti è la seguente:

<div style="width:100%; padding-top:10px; padding-bottom:10px; height:200px; text-align:center;">
        <asp:HyperLink ID="HLFoto" runat="server"></asp:HyperLink>
</div>

Qualcuno saprebbe darmi qualche dritta?
Grazie!

[graffithouse]

aggiungi

line-hieght:;

[motogpdesmo16]

Potresti farmi un esempio pratico??
L'attributo line-height l'ho sempre utilizzato nel caso di testi per aumentare l'interlinea tra una riga e l'altra.
In questo caso come dovrei effettuare la valorizzazione?? Valori percentuali o assoluti??

[graffithouse]

intanto ti consiglierei di usare i css esterni.

cmq, lo stile da dare è questo.


div{
background:#fff;
height:100px;
line-height:100px;
margin:0;
text-align:center;
vertical-align:middle;
padding:0;
}

l'importante è impostare height e line-height con lo stesso valore.

[motogpdesmo16]

Ti ringrazio per l'esempio innanzitutto.
Seguendo le tue indicazioni ho dunque modificato l'attributo style in questa maniera:

                    <div style="width:100%; padding-top:10px; padding-bottom:10px; height:200px; text-align:center; vertical-align:middle; line-height:200px;">
                        <asp:HyperLink ID="HLFoto" runat="server"></asp:HyperLink>
                    </div>

Tuttavia non sembra essersi modificato nulla poichè l'effetto è sempre lo stesso:


Un'ultima cosa, non direttamente inerente il problema: mi consigli di inserire in un css esterno anche attributi di stile per oggetti meno "importanti" nell'ambito della pagina??
Grazie.

[motogpdesmo16]

Up.
Nessuno riuscirebbe ad aiutarmi??

[Vincent.Zeno]

<div style="width:100%; height:200px; text-align:center; ">
link
 </div>

[LA VALE]

Un'ultima cosa, non direttamente inerente il problema: mi consigli di inserire in un css esterno anche attributi di stile per oggetti meno "importanti" nell'ambito della pagina??
Grazie.

Andrebbe messo TUTTO ciò che riguarda la formatazzione del testo e del layout in un css esterno, lasciando all'interno della pagina solamente la struttura del layout..

[motogpdesmo16]

Originariamente inviato da Vincent.Zeno

<div style="width:100%; height:200px; text-align:center; ">
link
 </div>

Ho provato a seguire il tuo suggerimento ma, per un altro caso analogo del quale mi sto occupando, ottengo la seguente visualizzazione (ho messo un background color per far capire meglio dove sono posizionati i limiti del div)


Il codice che ho scritto è il seguente:

<div style=" width:100%; float:left;overflow:hidden; padding-bottom:30px;">
  
  <div style=" width:39%; float:left; text-align:center; height:165px;">
    <a href="img/Attrezzature-Standard/Attrezzature_04.jpg" style="position:relative; top:50%;" rel="lightbox[Attrezzature-Standard]" title="Gamma completa di mandrini e relativi accessori.">
        [img]img/Attrezzature-Standard/Attrezzature_04_t.jpg[/img]
    </a>
  </div>  
  
    <div style=" float:left; width:30%; text-align:center; height:165px;">
     <a href="img/Attrezzature-Standard/Attrezzature_01.jpg"  style="position:relative; top:50%;" rel="lightbox[Attrezzature-Standard]" title="Morse e Cubi FMS Gerardi per bloccaggi singoli, doppi e autocentranti.">
        [img]img/Attrezzature-Standard/Attrezzature_01_t.jpg[/img]
     </a>
  </div>
  
    <div style=" float:left; width:30%; text-align:center; height:165px;">
      <a href="img/Attrezzature-Standard/Attrezzature_03.jpg"  style="position:relative; top:50%;" rel="lightbox[Attrezzature-Standard]" title="Portapezzi Gerardi per centri di lavoro.">
      [img]img/Attrezzature-Standard/Attrezzature_03_t.jpg[/img]
      </a>
    </div>
</div>

Grazie per l'aiuto!

[Vincent.Zeno]

Originariamente inviato da motogpdesmo16
Ho provato a seguire il tuo suggerimento ma, per un altro caso analogo del quale mi sto occupando, ottengo la seguente visualizzazione (ho messo un background color per far capire meglio dove sono posizionati i limiti del div)

giusto... avevo dimenticato che l'immagine ha una dimensione superiore al sempilce testo.

1) che DTD stai usando?
2) queste immagini hanno dimensione variabile?
3) anche se non è "conforme"... puoi usare tabelle?
(non è detto che si possa fare "dinamicamente" con CSS)