那些遇到过的问题

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

Jus*_*ten 4 html css asp.net formatting

我现在已经开始使用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>
Run Code Online (Sandbox Code Playgroud)

这是我对表元素的尝试

    <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>
Run Code Online (Sandbox Code Playgroud)

所有这些<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>
Run Code Online (Sandbox Code Playgroud)

Ben*_*esh 5

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

要清楚,使用CSS在父级中垂直居中并不容易,诀窍是:

  • 父元素必须具有position: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>
Run Code Online (Sandbox Code Playgroud)

编辑:看过你修改过的问题后,我修改了我的答案,只将按钮居中放在textarea的垂直位置.

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

  • 没有任何恶意(至少,不是来自我); 我们其中一个是对的.可能是我,也许是你.就像我说的,如果我读到它是错误的,我会把我的投票从 - 转到+,因为你是对的.如果是这样的话,我也会删除我的答案,因为这是错误的.我只是希望OP能为我们澄清...... (3认同)

归档时间：

查看次数：

15581 次

最近记录：

16 年 前
相关归档
(非空)自动关闭标签在HTML5中有效吗？ 635
日期与日期时间 101
如何在vue.js webpack项目中正确设置favicon.ico？ 84
如何强制div出现在下面而不是另一个？ 69
CSS - 完全相同的高度和按钮和输入文本框的对齐方式 29
使ul列表像选择输入一样工作 18
ASP.NET Web API登录方法 17
如何在用户会话到期时重定向到页面？ 12
为什么我的属性会在所有操作上被触发,包括那些没有属性的操作？ 11
可以在ASP.NET用户控件中使用void异步方法吗？ 10
难疑归档
URI,URL和URN有什么区别？ 4217
如何使用JavaScript漂亮地打印JSON？ 2222
在vi中快速缩进多行 2111
找到已安装的npm软件包的版本 2037
PostgreSQL"DESCRIBE TABLE" 1790
如何在Python中删除尾部换行符？ 1593
.gitignore被Git忽略了 1407
我应该如何道德地接近用户密码存储以便以后的明文检索？ 1346
如何让ASP.NET Web API使用Chrome返回JSON而不是XML？ 1220
UTF-8一路走来 1146