How do you center a textbox inside an ASP panel?

Question

Let's say my panel is 200px and i want 5px padding on the left and right, the textbox to be the max size it can (I could calculate it but is there a dynamic way to do this with the browser). The trickier part is how do I get an even amount of padding on top and bottom?

Answer 1

Make sure you're using a <textarea> element - you should be able to put padding: 5px (or whatever you want) on the container element, then put height: 100% and width: 100% on the textarea.

Your container element has to have a height though.

I only tested in IE8 and FF3.

Answer 2

Here's the code that I used earlier for one of my pages. This is plain HTML, but I guess it should be no trouble for you to modify it for asp controls. Basically the content of the inner div (content) is always positioned in center both vertically and horizontally.

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

Answer 3

I don't have a way of dynamically sizing the textbox, but if you enclose the textbox in a div, assign the div a height and width and set the margins of that div to auto (margin: auto;), that should work.

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