ASP.NETでオブジェクトを縦に整列する方法は？

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

私の既存のコード：

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

出典

2011-11-30 PFranchise

ASPとASP.NETは同じものではありません。あなたは2つの用語を正しく使う習慣を身につけるべきです。そうしないと、あなたが期待する答えが得られないかもしれません。 –

この質問は、ASP.NETとほとんど関係ありません。これはHTMLの質問です。プレーンなHTMLでそれを行う方法を解説し、あなたの答えを得るでしょう。 –

@Abe申し訳ありません。私は将来の投稿時にこれを念頭に置いておきます。今回私の問題を修正してくれてありがとう。 – PFranchise

最も簡単には、CSSやテーブルを使用しています。私は高さとdivの周りを配置し、上に垂直に揃えます。 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>

出典

2011-11-30 00:55:53 Robert

私は大いに感謝します。しかし、3つのアイテムはすべて、垂直方向のボトムに基づいて整列しています。 3つのオブジェクトの中央を揃える方法はありますか？この欲望が私の質問ではっきりしないかどうか謝罪します。 – PFranchise

これを反映するようにコードを修正しました。それぞれを独自のdivタグに置き、パディングトップを調整して整列させる必要があります。それが唯一の問題はクロスブラウザーであり、すべてが完璧に並んでいない可能性があります。それぞれのブラウザーで非常に近いが、まったく同じではないはずです。 – Robert

どうもありがとうございました。それはほとんどのサイトがこのようなことを処理する方法ですか？私はこのようなオブジェクトを整列させたいという気持ちが共通の関心事になると感じています。 – PFranchise

私は同じ問題を抱えていたし、私はテーブルや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; 
}

出典

2013-05-14 11:28:07

ASP.NETでオブジェクトを縦に整列する方法は？

答えて

関連する問題