2011-11-30 18 views
11

Sono in giro da un po 'con asp.net e ho sempre problemi nell'allineamento di oggetti con altezze diverse sulla stessa riga. Ad esempio, in questo caso, ho un'etichetta di ricerca, un campo di testo, quindi un pulsante immagine. Qual è il "modo corretto" per allineare correttamente questi tre elementi?Come allineare gli oggetti verticalmente in ASP.NET?

mio codice esistente:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    </asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <asp:Panel VerticalAlign="Center" runat="server"> 
    <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label> 
    <asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" 
     Height="30px" style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox> 
    <asp:ImageButton ID="ImageButton2" runat="server" Height="45px" 
     ImageUrl="~/Images/SearchButton.PNG" style="margin-left: 18px; margin-top: 0px" 
     Width="95px" /> 
    </asp:Panel> 
</asp:Content> 
+0

ASP e ASP.NET non sono la stessa cosa. Dovresti avere l'abitudine di usare correttamente i due termini o potresti non ottenere la risposta che ti aspetti. –

+0

Questa domanda ha molto poco a che fare con ASP.NET. È praticamente una domanda HTML. Scopri come farlo con un semplice codice HTML e avrai la tua risposta. –

+0

@Sono dispiaciuto. Terrò questo a mente quando pubblicherò in futuro. Grazie per aver corretto il problema per me questa volta. – PFranchise

risposta

7

Il metodo più semplice sta usando CSS o tabelle. Ho messo un div in giro con un'altezza e allineato verticalmente verso l'alto. CSS Reference

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <asp:Panel ID="Panel1" VerticalAlign="Center" runat="server"> 
     <div style="height: 40px; vertical-align: top"> 
      <div style="padding-top: 10px; float:left;"> 
       <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label> 
      </div> 
      <div style="padding-top: 5px; float:left;"> 
       <asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" Height="30px" 
        Style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox> 
      </div> 
      <div style="padding-top: 5px; float:left;"> 
       <asp:ImageButton ID="ImageButton2" runat="server" Height="45px" ImageUrl="~/Images/SearchButton.PNG" 
        Style="margin-left: 18px; margin-top: 0px" Width="95px" /> 
      </div> 
     </div> 
    </asp:Panel> 
</asp:Content> 
+0

Apprezzo molto la risposta. Tuttavia, tutti e tre gli elementi sono ancora allineati in base al loro fondo verticale. C'è un modo per allineare la metà dei tre oggetti? Mi scuso se questo desiderio non era chiaro nella mia domanda – PFranchise

+0

Ho modificato il codice per riflettere questo: dovresti inserire ognuno nel proprio tag div e regolare il padding-top per renderli allineati. L'unico problema è che potrebbero non essere tutti allineati perfettamente, dovrebbero essere molto vicini ma non esattamente gli stessi su ogni browser. – Robert

+0

OK. Grazie mille. È così che la maggior parte dei siti gestisce questo genere di cose? Mi sento come se volessi allineare tali oggetti sarebbe una preoccupazione comune. – PFranchise

0

Ho avuto lo stesso problema e penso che l'utilizzo di una tabella o di un div solo per allineare la casella di testo è eccessiva.

ho risolto semplicemente:

<asp:TextBox ID="TextBox2" runat="server" Width="60px"></asp:TextBox>&nbsp; 
<asp:ImageButton ID="ImageButton1" runat="server" 
       ImageUrl="~/imatges/imgNou.png" 
       CssClass="style3" ImageAlign="AbsBottom" /> 

e aggiungendo la margin-top in visualizzazione struttura, l'IDE ha aggiunto:

.style3 
{ 
    margin-top: 6px; 
} 
Problemi correlati