ASP.NET에서 개체를 세로로 맞추는 방법은 무엇입니까?

저는 잠시 동안 asp.net을 사용하고 있습니다. 항상 동일한 행에있는 다양한 높이의 객체를 정렬하는 데 문제가 있습니다. 예를 들어이 경우에는 검색 레이블, 텍스트 필드, 이미지 버튼이 있습니다. 이 세 가지 항목을 올바르게 정렬시키는 "적절한 방법"은 무엇입니까?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은 같은 것이 아니다. 두 가지 용어를 올바르게 사용하는 습관을 갖춰야합니다. 그렇지 않으면 예상 한 답을 얻지 못할 수도 있습니다. –

이 질문은 ASP.NET과 관련이 거의 없습니다. 그것은 꽤 많은 HTML 질문입니다. 평범한 HTML로 어떻게하는지 알아 내면 대답을 얻게됩니다. –

@Abe 죄송합니다. 앞으로 게시 할 때이를 명심하십시오. 이번에는 문제를 해결해 주셔서 감사합니다. – PFranchise

가장 쉬운 CSS 또는 테이블을 사용하고 있습니다. 나는 div와 높이를 수직으로 정렬했다.

<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

나는 응답을 크게 주셔서 감사합니다. 그러나 세 항목 모두 수직 바닥을 기준으로 정렬됩니다. 세 객체의 중간을 정렬하는 방법이 있습니까? 이 질문이 명확하지 않다면 사과드립니다. – PFranchise

이것을 반영하도록 코드를 수정했습니다. 각각의 태그를 자신의 div 태그에 넣고 줄 바꿈을 조정하여 패딩 상단을 조정해야합니다. 그것의 유일한 문제는 크로스 브라우저입니다. 모든 브라우저가 완벽하게 일치하지는 않습니다. 각 브라우저에서 매우 가깝지만 정확하지는 않습니다. – Robert

좋아. 고맙습니다. 대부분의 사이트가 이런 종류의 일을 처리하는 방식입니까? 그런 물체를 정렬하고자하는 것이 공통 관심사가 될 것이라고 생각합니다. – PFranchise

CSS Reference 내가 같은 문제를했고 나는 테이블이나 사업부를 사용하는 경우에만 과도한의 텍스트 상자를 정렬 할 수 있다고 생각합니다.

는 단순히 해결 :

<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에서 개체를 세로로 맞추는 방법은 무엇입니까?

답변

관련 문제