asp.net - 我无法很好地定位此按钮

Question

我现在已经进行了 1.5 小时，但我只是想不出一种方法来实现我想要的方式。我对所有网络事物都是新手，它需要花费同样多的时间(也许更多？)尝试将事物放在我想要的地方并以优雅的方式进行。

无论如何，我有两个文本框，上面有两个标签，并且位于框的中央。我只想在它们之间放置一个按钮，并以文本框的高度为中心。

这是我所能达到的最接近的结果。我希望左边的文本框移过去，这样它就可以与“跳转到:”、“客户:”和“客户#:”这些词对齐，然后让右边的文本框与右边的距离相同，下一步按钮可能是只高出 10px 但仍然居中。这张图片的问题是它只在文本框显示和展开时有效，如果它们被隐藏，那么面板实际上呈现在 Customer # 部分上方的一半，因为如何我操纵了我猜测的边距。

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

这是我对 <div> 的尝试

<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>是试图在按钮和文本框之间放置空格，因为我无法获得 float 或 margin 工作。任何帮助将不胜感激!

这是完整的页面源:

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

Answer 1

这似乎更像是一个 CSS 和 HTML 问题，而不是一个 ASP.Net 问题。

需要说明的是，使用 CSS 将事物垂直居中于其父级并不容易，诀窍是:

• 父元素必须有一个position:relative或绝对。
• 子项必须包裹在 div 或可定位的东西中。
• child 必须有top:50%
• child 必须申报高度。
• child 必须有一个 margin-top = 它的高度/2 * -1。 (基本上你将它向上移动了它高度的一半。)

试试这个:

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

编辑:看到您修改后的问题后，我修改了我的答案以将按钮仅垂直放置在文本区域中。

您必须对顶部边距执行一些愚蠢的 CSS 技巧，但它可以完成工作。还要注意容器 div。这是为了确保如果您在标记中在此代码段“上方”放置任何内容，它不会被标签重叠。