2012-04-17 10 views
0

私はイメージとハイパーリンクを上下に持つリピータコントロールを持っています。複数のテキスト行を追加するたびに、テキストがイメージコントロールを押し上げます。画像の上端を水平に整列させ、テキストが1行以上ある場合には下向きになるようにします。 にご相談ください。ここでリピータコントロールのアイテムテンプレート内のコントロールを整列させますか?

Alignment error

私が使用しているASCXコードです:

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> 
<asp:View ID="View1" runat="server"> 

<asp:UpdatePanel ID="UpdatePanelAnnouncements" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 

<table> 
<tr> 
    <asp:Repeater ID="repAnnouncements" runat="server"> 
     <ItemTemplate> 
      <td style="padding-right:19px; padding-top:1px; padding-left:7px;"> 
       <asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" /> 
       <asp:HyperLink ID="hypImageEditLink" runat="server"> 

       <div class="ImageStyle" > 
       <asp:Image ID="imgLink" Height="110px" Width="150px" runat="server" ImageUrl='<%#Eval("Images")%>' CssClass ="magnify"/> 
       </div> 

       </asp:HyperLink> 
       <br/><br/> 
       <div id="div3" class="Div3"><asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval("Title")%>' CssClass="TitleStyle"/></div> 
      </td> 
     </ItemTemplate> 
    </asp:Repeater> 
</tr> 
</table> 

</ContentTemplate> 
</asp:UpdatePanel> 
</asp:View> 

そしてここでは、スタイルシートである:

.div3 
{ 
    width: 150px !important; 
    display:inline !important; 
    /*display: -moz-inline-box !important; 
    display: inline-block !important; */ 
    float:left !important; 
} 

.ImageStyle 
{ 
    margin-left:8px; 
    /* Width:150px !important; Height:110px !important; 
    box-shadow: 0px 0.5px 35px 15px #888888;*/ 
    border-collapse: separate !important; 
    box-shadow: 0px 0.5px 11px 4px #888888; 
    /*box-shadow: 0px 0.5px 11px 4px rgb(150,150,150);*/ 
} 

    .ImageStyle:hover 
    { 
     opacity:0.5 !important; 
     filter: alpha(opacity=50) !important; 
     border-color:blue !important; 
     border-width:thick !important; 

    } 

答えて

3

がたくさんあるときに私は、あなたの質問を理解したよう画像の下にテキストがあると、画像の残りの部分がセルの中央で垂直に整列します。これを解決するには、TDタグを次のように変更します。

<td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;"> 
+0

パーフェクト!ありがとう、トン。 – user1266515

関連する問題