Question

我现在已经开始使用了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>

Answer 1

看起来这更像是一个CSS和HTML问题而不是ASP.Net问题。

要明确的是，使用CSS在父级中垂直居中并不容易，诀窍是：

父元素必须具有位置：relative或absolute。
孩子必须用div或其他可定位的东西包裹。
孩子必须拥有最高分：50％
孩子必须申报身高。
孩子必须有一个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>

编辑：看过你修改过的问题后，我修改了我的答案只将按钮居中放在textarea垂直。

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

Answer 2

如果我没有误解，那就不那么难了。看看下面的代码是否呈现了你的图像所说的布局。

<table cellpadding="3px" cellspacing="0" border="0" style="width: 100%;">
    <tr>
        <td align="center" valign="top">
            Label
        </td>
        <td align="center" valign="top">
            &nbsp;
        </td>
        <td align="center" valign="top">
            Label
        </td>
    </tr>
    <tr>
        <td align="center" valign="top">
            <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="7" runat="server"></asp:TextBox>
        </td>
        <td align="center" valign="top">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </td>
        <td align="center" valign="top">
            <asp:TextBox ID="TextBox2" TextMode="MultiLine" Rows="7" runat="server"></asp:TextBox>
        </td>
    </tr>

</table>

Answer 3

我会坚持使用像这张桌子一样简单的东西......然后根据需要添加填充。

<table>
  <tr>
    <td align="center">label a</td>
    <td></td>
    <td align="center">label b</td>
  </tr>
  <tr>
    <td valign="top"><textarea id="txtinfodescription" rows="3" maxlength="500" width="80%"></textarea></td>
    <td valign="middle"><input type="button" id="button2" value="next"/></td>
    <td valign="top"><textarea id="txtinfodata" rows="3" maxlength="500" width="80%"></textarea></td>
  </tr>
</table>

不要误解我的意思，你也可以去纯CSS路线......但是如果你的布局变得更加复杂，你需要保持一个相当僵硬的“网格状”结构...表帮助。 / p>

我很难很好地定位这个按钮

3 个答案: