如何在 ASP 面板中居中文本框？答案

【问题标题】：How do you center a textbox inside an ASP panel?如何在 ASP 面板中居中文本框？
【发布时间】：2009-07-01 01:03:02
【问题描述】：

假设我的面板是 200 像素，我希望在左右填充 5 像素，文本框是它可以的最大尺寸（我可以计算它，但有没有一种动态的方式来使用浏览器来做到这一点）。更棘手的部分是如何在顶部和底部获得均匀的填充？

【问题讨论】：

你知道面板的高度吗？
如果这是唯一的方法，我希望有一种方法可以计算 CSS 中的剩余空间并从那里开始

标签： asp.net html css

【解决方案1】：

我没有动态调整文本框大小的方法，但是如果将文本框包含在 div 中，请为 div 分配高度和宽度，并将该 div 的边距设置为自动（边距：自动；），即应该可以。

【讨论】：

【解决方案2】：

这是我之前用于我的一个页面的代码。这是纯 HTML，但我想您修改它以用于 asp 控件应该不成问题。基本上，内部 div 的内容（内容）始终位于垂直和水平中心。

<div id="container" style="position:relative; height:100px;border:1px solid #000;">
  <div id="content" style="border:1px solid #000; position:absolute; top:50%; left:0px; width:100%; height:20px; margin-top:-10px; text-align:center;">When inserting <b>element</b> here you need to modify <b>height=elementHeight, margin-top=elementHeight/2</b> of the outer div (id="content").</div>
</div>

【讨论】：

【解决方案3】：

确保您使用的是元素 - 您应该能够在容器元素上放置 padding: 5px（或任何你想要的），然后在 textarea 上放置 height: 100% 和 width: 100%。

你的容器元素必须有一个高度。

我只在 IE8 和 FF3 中测试过。

【讨论】：

【解决方案4】：

This is something I would've done.


<style type="text/css" >
    .panel{
        padding-left:5px;
        padding-right:5px;
        padding-top:10px;
        padding-bottom:10px;
    }
</style>


<asp:Panel ID="Panel" runat="server" Width="300" CssClass="panel">
        <asp:TextBox ID="TextBox" runat="server" Width="100%" />
    </asp:Panel>

【讨论】：