Asp.net I'；我很难很好地定位这个按钮_Asp.net_Html_Css_Formatting

Asp.net I'；我很难很好地定位这个按钮

asp.net html css formatting

Asp.net I'；我很难很好地定位这个按钮,asp.net,html,css,formatting,Asp.net,Html,Css,Formatting,我已经做了1.5个小时了，我就是想不出一个办法来达到我想要的效果。我对万维网有点陌生，要想把东西放到我想要的地方，用一种优雅的方式去做，需要花费同样多的时间（也许更多？）无论如何，我有两个文本框，上面有两个标签，在框的中心。我只想在它们之间放一个按钮，大约以文本框的高度为中心这是我能做到的最接近我想要的。我想把左边的文本框移过去，这样它就可以与“跳转到：，”客户：，”和“客户#：“然后让右边的框与右边的下一个按钮保持相同的距离，可能只高出10px，但仍然居中。”。这张图片的问题是，它只在文本

我已经做了1.5个小时了，我就是想不出一个办法来达到我想要的效果。我对万维网有点陌生，要想把东西放到我想要的地方，用一种优雅的方式去做，需要花费同样多的时间（也许更多？）

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

这是我能做到的最接近我想要的。我想把左边的文本框移过去，这样它就可以与“跳转到：，”客户：，”和“客户#：“然后让右边的框与右边的下一个按钮保持相同的距离，可能只高出10px，但仍然居中。”。这张图片的问题是，它只在文本框被显示和展开时才起作用，如果它们被隐藏，那么面板实际上会呈现在客户部分上方的一半，因为我是如何操纵我猜测的边距的

下面是我对

s的尝试

下面是我对表元素的尝试

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

所有这些

都是试图在按钮和文本框之间留出空格，因为我无法使浮动或边距正常工作。任何帮助都将不胜感激

以下是完整的页面来源：

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


跳转到：
客户：
顾客：

如果我没有误解的话，这并不难。查看以下代码是否呈现图像所示的布局

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


标签
标签

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

清楚地说，使用CSS在父对象中垂直居中并不容易，诀窍是：

父元素必须有一个位置：相对或绝对
孩子必须被包裹在一个div或其他可以放置的东西里
孩子必须有最高的分数：50%
孩子必须申报身高
孩子必须有一个页边空白顶部=它的高度/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>


分区文本框区域{
文本对齐：居中；
浮动：左；
宽度：40%；
高度：400px；
}
.textboxArea textarea{
宽度：80%；
高度：400px；
}
.centermediv{
位置：绝对位置；
最高：50%；
垂直对齐：中间对齐；
高度：30px；
宽度：100%；
利润上限：-15px；
文本对齐：居中；
}
div.centerMe垂直{
浮动：左；
宽度：20%；
文本对齐：居中；
高度：400px；
位置：相对位置；
}
p{
高度：35px；
利润率：-35px 0；
}
.集装箱{
利润上限：35px；
}
标签1
按钮2
标签2

编辑：看到您修改后的问题后，我将答案修改为将按钮垂直居中至文本区域

你必须在页边空白处做一些愚蠢的CSS技巧，但是它完成了任务。还要注意container div。这是为了确保如果您在标记中将此代码段“上方”放置任何内容，它不会被标签重叠。
我会坚持使用类似于此表的简单内容。。。然后根据需要添加填充

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

标签a 标签b

别误会，你也可以走纯CSS路线。。。但是如果你的布局变得更加复杂，你需要保持一个相当刚性的“网格状”结构。。。表格有帮助。
在我看来，表格应该是最后的手段，而不是第一选择，除非你在展示表格数据。但是，这个解决方案是有效的，所以我不会投反对票。：）约翰·鲁迪表示同意。不过，我今天并没有感到宽宏大量，所以我的建议是-1。那些渴望html表格的人应该提供表格数据。因此，如果tommorow的浏览器具有支持更灵活/可维护样式的表的功能，那么javascript。他们会排成一行赞扬桌子，诅咒女主角。我只是想，我过去多年来对桌子的态度都是一样的。然而，当我浏览我的电子商务网站并为更智能的CSS转储表格布局时，它为我节省了30%的html输出大小和大量的带宽。它还使我的网站在较小的移动浏览器中看起来更好。@Saar：今天的浏览器附带的表格能够呈现非常灵活和可维护的样式。我不是疯狂的纯div，但我更喜欢语义正确。当我（a）展示桌子（咧嘴笑）或（b）没有其他非黑客选择时，我将使用桌子。对于正确的工作来说，正确的工具就是一切。这与saar的答案（）有什么不同？显然不多，但当我写/发布我的答案时，没有其他答案。看起来萨尔的帖子赢得了比赛。@Justen:我们能澄清一下，你是想让按钮垂直居中，还是想让顶部对齐（如图所示）？是的，很抱歉耽搁了，我已经离开我的工作笔记本一段时间了。我用一个屏幕截图更新了我的原始帖子“在它们之间，大约以t为中心”
<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>