web-dev-qa-db-ja.com

ASP.NETでオブジェクトを垂直方向に整列させる方法は？

私はしばらくの間asp.netをいじっていて、同じ行のさまざまな高さのオブジェクトを整列させるのに常に問題があります。たとえば、この場合、検索ラベル、テキストフィールド、画像ボタンがあります。これらの3つのアイテムを適切に配置するための「適切な方法」とは何ですか？

私の既存のコード：

<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

最も簡単なのは、CSSまたはテーブルを使用することです。高さと垂直方向を上に揃えてdivを配置します。 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

同じ問題が発生しました。テーブルまたはdivを使用して、テキストボックスを整列するだけでは過剰だと思います。

私は簡単に解決しました：

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

そして、デザインビューにmargin-topを追加すると、IDE追加：

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