web-dev-qa-db-fra.com

Comment aligner des objets verticalement dans ASP.NET?

Cela fait un moment que je bricole avec asp.net et j'ai toujours du mal à aligner des objets de différentes hauteurs sur la même rangée. Par exemple, dans ce cas, j'ai une étiquette de recherche, un champ de texte, puis un bouton d'image. Quel est le "bon moyen" pour aligner correctement ces trois éléments?

Mon code existant:

<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>
asp.nethtmlcss
11
PFranchise

Le plus simple est d'utiliser des CSS ou des tableaux. Je mets une div autour avec une hauteur et verticale aligner vers le haut. Référence CSS

<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>
7
Robert

j'ai eu le même problème et je pense que l'utilisation d'une table ou d'un div uniquement pour aligner la zone de texte est excessive.

J'ai résolu simplement:

<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" />

Et en ajoutant le margin-top en mode Création, le IDE ajouté:

.style3
{
    margin-top: 6px;
}
0
Toni Torrents