Center panel elements in asp.net

Question

I'm new to asp.net. currently working on a form. i need center the elements in that panel

<asp:Panel ID="Panel1" runat="server">
      <asp:Label ID="Label1" runat="server" Text="Meeting Name"></asp:Label>
      <asp:TextBox ID="meetingname" runat="server"></asp:TextBox>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
      <asp:Label ID="participants" runat="server" Text="Participants Email"></asp:Label>
      <asp:TextBox ID="TextBox2" TextMode="MultiLine" style="text-align:center" runat="server"></asp:TextBox> 
</asp:Panel>
<asp:Panel ID="Panel3" runat="server"> 
      <asp:Button ID="Button1" runat="server"  Text="Create Meeting" />
</asp:Panel>

I need to center the text boxes with label. And also refer any better place to see these basic things in asp.net tags enter image description here

Create a project in your VS target `.Net 4.0`. Open the `Register.aspx` file from Accounts folder. See how fields are formatted. — Iqbal, Feb 12 '14 at 07:42
see this http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally — Majid, Feb 12 '14 at 07:42
use
tag and set its alignment, but i strongly recommend that you should learn some basics from www.w3schools.com — AddyProg, Feb 12 '14 at 07:45
Everyone does need to start in some place. So let's help him, IF you want to have it all centered you can use text-align: center; in your css for the containing box. Else if you want to center the block, you can give the containing box a fix width and a margin auto, so in css this would be: width:200px; margin:auto; — Spons, Feb 12 '14 at 07:49
@Exbury What you see in the asp.net code isn't what is generated on your website ;) try viewing you source on your website by right clicking the page. You'll see that you can't find the panels. but you will see div's — Spons, Feb 12 '14 at 07:50
i know that....but asp.net tags easily called in server side than html tags.is that right? — Bruce, Feb 12 '14 at 07:52
I don't think i understand your last comment?, In every case it's not important for now if it's a div or a panel. you can add the needed css to you're #panel1 , #panel2, #panel3. Play a round a bit with the options i commented earlier. — Spons, Feb 12 '14 at 07:54
@Exbury : you can also use google chrome's "Inspect Element" to see what HTML code is generated. you will see your web page aligned using divs... — AddyProg, Feb 12 '14 at 07:54
asp.net have elements like html. anyone differentiate what is the different between those tags. or both are same? — Bruce, Feb 12 '14 at 07:59
@Exbury The difference is that for example a is usable in your C# code, but if you make a
it won't be. So the asp:panel you can call by it's id in your c# code to change it's color or hide it and that kind of stuff. But in the end both end up as an
in your html code. — Spons, Feb 12 '14 at 10:57

score 0 · Answer 1 · answered Feb 12 '14 at 11:45

You need to the control display in center so use the below code.

 <div style="padding-top: 100px;">
        <table width="100%">
            <tr>
                <td width="20%">
                    &nbsp;
                </td>
                <td width="30%" align="center" colspan="2" style="background-color: #008080; color: #FFFFFF;">
                    <strong>Welcome To Asp.Net</strong>
                </td>
                <td width="20%">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td width="20%">
                    &nbsp;
                </td>
                <td width="30%" align="right" style="background-color: #008080; color: #FFFFFF;">
                    <asp:Label ID="Label1" runat="server" Text="Meeting Name"></asp:Label>
                </td>
                <td width="30%" style="background-color: #008080; color: #FFFFFF;">
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td width="20%">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td align="right" style="background-color: #008080; color: #FFFFFF;">
                    <asp:Label ID="participants" runat="server" Text="Participants Email"></asp:Label>
                </td>
                <td style="background-color: #008080; color: #FFFFFF;">
                    <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td align="center" colspan="2" style="background-color: #008080; color: #FFFFFF;">
                    <asp:Button ID="Button1" runat="server" Text="Create Metting" />
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>

score -1 · Answer 2 · edited Feb 12 '14 at 10:54

-1

Why use panel 3 times? The simplest code to do this is as

<asp:Panel ID="Panel1" runat="server">

<table style="border:1px solid gray;width:50%">
    <tr>
        <td>
            <asp:Label ID="Label1" runat="server" Text="Meeting Name"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="meetingname" runat="server"></asp:TextBox>
        </td>
    </tr>

    <tr>
        <td>
            <asp:Label ID="participants" runat="server" Text="Participants Email"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="TextBox2" TextMode="MultiLine" style="text-align:center" runat="server"></asp:TextBox> 
        </td>
    </tr>


    <tr>
        <td colspan="2" align=center>
            <asp:Button ID="Button1" runat="server"  Text="Create Meeting" />
        </td>
    </tr>
</table>
</asp:Panel>

edited Feb 12 '14 at 10:54

Spons

1,593
1
17
46

answered Feb 12 '14 at 07:50

angfreak

993
2
11
27

@spons hey i have just provides very simple example for Exbury because he mentioned that he is new... pls dont take it seriously. – angfreak Feb 12 '14 at 08:05
Ok I agree but i would like to discourage everyone, even new guys of using tables if you don't need to use them.. Tables are made with an purpose... To show tabular data, not to make a nice layout.. And if we teach it wrong to the new guys.. They will have an hard time changing it in the end.. better learn it the right way from the beginning... – Spons Feb 12 '14 at 10:59
1

I am fully agree with you, thank you for this, i would follow this. – angfreak Feb 12 '14 at 11:36

Center panel elements in asp.net

2 Answers2