2010-03-16 23 views
9

<td> var, iki görüntü(), aşağıdaki gibi gösteriliyor. Biri diğerinden çok daha yüksek. Daha kısa olanın <td />'un üstüne nasıl hizalanmasına izin veririm?Görüntülerin dikey olarak hizalanması,

<td style="padding-left: 0px; cursor: pointer; vertical-align: top;"> 
<img width="85px" src=".../xyz.png"/> 
<img src=".../icon_live.gif" /> // shorter one 
</td> 

cevap

3

Eğer <img class="tops"> sonra CSS için bir sınıf verirsek

.tops { 
    vertical-align: top; 
} 

tablo hücre üstüne görüntülerin üst kenarını bağlayacaktır.

+0

Hmm, şu anda baktığım örnek sayfa, örnek kodunuzdan iki şekilde farklıdır. Img etiketleri 'height =' direktiflerine sahiptir ve stil bir sınıf olarak belirtilir. Şimdi çapraz tarayıcı testi yapıyorum ... – msw

+0

Oops, Ben gerçekten img' tag niteliğini kastediyorum. – msw

10

Görüntülerin üzerinde dikey hizalama ayarlamanız gerekir.

#logo-table td img, #logo-table td 
{ 
    vertical-align: middle; 
} 

:

<style> 
td img { 
    vertical-align: top; 
} 
</style> 
4

ilk görüntü (Uzun olanı)

<td style="padding-left: 0px; cursor: pointer; vertical-align: top;"> 
<img width="85px" src=".../xyz.png" align="top" /> 
<img src=".../icon_live.gif" /> // shorter one 
</td> 
+0

Eminim bunlardan birini ayarlarsanız, onu büyük olanı yerine küçük olana ayarlamanız gerekir. –

1

için align="top" eklemek bu deneyin ..

<td cellpadding="0" valign="top"> 
    <img width="85" src=".../xyz.png" style="display:inline;"/> 
    <img src=".../icon_live.gif" style="display:inline;" /> 
</td> 
2

Bu benim için bir iş yaptı Html'de:

İlgili konular