asp.net – 我很难很好地定位这个按钮

我现在已经开始使用1.5小时了,我无法想出办法让它成为我想要的方式.我对网络上的所有东西都很陌生,并且需要花费大量时间(可能更多？)来尝试将事物放在我想要的地方并以优雅的方式进行.

无论如何,我有两个文本框,上面有两个标签,并在框上方居中.我想简单地在它们之间放一个按钮,并以文本框的高度为中心.

这就像我能够达到我想要的那样接近.我希望左侧文本框移动,以便它与“跳转到：”,“客户：”,“和”客户#：“排成一行,然后右侧的框与右侧的相同距离可能是”下一步“按钮只有10px高,但仍然居中.这张照片的问题是它只在显示和展开文本框时才有效,如果它们被隐藏,那么面板实际上会在Customer#部分上方呈现,因为如何我操纵了我猜的边距.

http://img192.imageshack.us/img192/259/controls.jpg http://img192.imageshack.us/img192/259/controls.jpg

这是我与< div> s的尝试

<div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;">
    <div style="width:40%; float:left; margin-left:10px;">
        <div><asp:Label runat="server" ID="lblInfoDesc" /></div>
        <div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
    </div>

    <%--<div style="position:absolute; margin-top:25px; margin-left:-10px;"><asp:Button ID="Button1" runat="server" Text="Next" /></div>--%>

    <div style="width:40%; float:right; margin-right:16px;">
        <div><asp:Label runat="server" ID="lblInfoData" /></div>
        <div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
    </div>
</div>

这是我对表元素的尝试

<div style="margin-bottom:10px;">
        <table style="position:relative; width:100%; margin-bottom:15px;">
            <tr style="text-align:center";>
                <td><asp:Label runat="server" ID="lblInfoDesc" /></td>
                <td></td><td></td><td></td><td></td>
                <td><asp:Label runat="server" ID="lblInfoData" /></td>
            </tr>
            <tr>
                <td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
                <td></td><td></td><td></td><td></td>
                <td style="margin-right:10px;"><asp:TextBox ID="txtInfoData"        runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
            </tr>
        </table>

        <div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;">
            <asp:Button ID="Button2" runat="server" Text="Next" />
        </div>
    </div>

所有这些< td>< / td>< td>< / td>< td>试图在按钮和文本框之间放置空格,因为我无法获得浮动或边距.任何帮助将非常感激！

这是完整的页面来源：

<asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px">

    <div style="position:relative; margin-top:10px; margin-left:10px;">
        <div style="color:#003399; font-size:18px; text-align:left;">Jump To:
            <asp:DropDownList ID="ddlCategory" runat="server" AutoPostBack="True" 
                              onselectedindexchanged="ddlCategory_SelectedIndexChanged" 
                              style="margin-left:40px;"/>
        </div>
    </div>

    <div style="position:relative; margin-top:10px; margin-left:10px;">
        <div style="color:#003399; font-size:18px; text-align:left;">Customer:
            <asp:DropDownList ID="ddlCustomersList" runat="server" AutoPostBack="true"  
                              OnSelectedIndexChanged="ddlCustomersList_SelectedIndexChanged" 
                              style="margin-left:35px;"/>

            <asp:Button ID="btnAddCustomer" runat="server" Text="Add" OnClick="btnAddCustomer_Click" OnClientClick="return confirm('Warning: This will redirect you from the page');" />
        </div>
    </div>

    <div style="position:relative; margin-top:10px; margin-left:10px;">

        <div style="color:#003399; font-size:18px; text-align:left;">Customer #:
            <asp:DropDownList ID="ddlCustomerNumber" runat="server" AutoPostBack="true"
                              OnSelectedIndexChanged="ddlCustomerNumber_SelectedIndexChanged"
                              style="margin-left:20px;"/>

            <asp:TextBox ID="txtCustomerNumber" runat="server" style="margin-left:20px;" />

            <asp:Button ID="btnModify"    runat="server" Text="Modify"     OnClick="btnModify_Click"    />
            <asp:Button ID="btnCreateNew" runat="server" Text="Create New" OnClick="btnCreateNew_Click" />

            <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
            <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" OnClientClick="return confirm('Do you want to delete the record ?');" />

            <asp:Button ID="btnSaveNew" runat="server" Text="Save"   OnClick="btnSaveNew_Click" />
            <asp:Button ID="btnCancel"  runat="server" Text="Cancel" OnClick="btnCancel_Click"  />
        </div>

    </div>

<%--    <div style="margin-bottom:10px;">
        <table style="position:relative; width:100%; margin-bottom:15px;">
            <tr style="text-align:center";>
                <td><asp:Label runat="server" ID="lblInfoDesc" /></td>
                <td></td><td></td><td></td><td></td>
                <td><asp:Label runat="server" ID="lblInfoData" /></td>
            </tr>
            <tr>
                <td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
                <td></td><td></td><td></td><td></td>
                <td style="margin-right:10px;"><asp:TextBox ID="txtInfoData"        runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
            </tr>
        </table>

        <div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;">
            <asp:Button ID="Button2" runat="server" Text="Next" />
        </div>
    </div>--%>


    <div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;">
        <div style="text-align:center; margin-bottom:-20px; ">
            <asp:Button ID="btnNextInfo" runat="server" Text="Next" />
        </div>

        <div style="width:40%; float:left; margin-left:10px;">
            <div><asp:Label runat="server" ID="lblInfoDesc" /></div>
            <div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
        </div>

        <div style="width:40%; float:right; margin-right:16px;">
            <div><asp:Label runat="server" ID="lblInfoData" /></div>
            <div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
        </div>
    </div>

    <div style="margin-top:-20px; position:absolute; font-size:12px;"><asp:Label runat="server" ID="lblErrorMessage" /></div>

</asp:Panel>

<style>
div.textboxArea {
    text-align:center;
    float:left;
    width:40%;
    height:400px;
}
.textboxArea  textarea {
    width:80%;
    height:400px;
}
.centerMeVertically  div {
    position:absolute;
    top:50%;
    vertical-align:middle;
    height:30px;
    width:100%;
    margin-top:-15px;
    text-align:center;
}
div.centerMeVertically {
    float:left;
    width:20%;
    text-align:center;
    height:400px;
    position:relative;
}
p {
     height:35px;
     margin:-35px 0 0 0;
}
.container {
    margin-top:35px;
}
</style>
<div class="container">
    <div style="width:100%;">
        <div class="textboxArea">
        <p>Label 1</p>
        <textarea></textarea>
        </div>
        <div class="centerMeVertically">
           <div><button>Button2</button></div>
        </div>
        <div class="textboxArea">
        <p>Label 2</p>
        <textarea></textarea>
        </div>
    </div>
</div>