Align labe with textbox on web page

Question

0.00/5 (No votes)

See more:

I'm trying to set up a GUI website via Visual Web Developer 2010 Express for a user to enter information...
I'm using Labels and Text Boxes.
I'm having a problem setting them up to appear in the middle of the window but aligned properly. In a form, they are within a paragraph (

) and maybe that is the probem!
i.e., say the below is aligned in the center of a webpage, I want each label line to be centered left, and textbox line to be centered off of that (i.e., zip code since it is the longest string).
The lines represent where the textbox should begin...

Name:     ___________
City:     ___________
State:    ___________
Zip Code: ___________

I can't seem to accomplish this!

I was trying to use Format --> Align --> Lefts, but it is greyed out, so I'm assuming it's not an option for an asp:label.
I also tried using Format --> Set Position --> Relative and manually moving it, but it is still not centering.

This is my code...

ASP.NET

<p style="height: 173px" align="center" class="style2" Width="100%">
    <asp:Label ID="LabelName" runat="server"
        style="font-family: Arial; position: relative; top: 0px; left: 0px; color: #000066; font-weight: 700" Width="50px"
        Text="Name:" ForeColor="#000066"></asp:Label>
    <asp:TextBox ID="TextBoxName" runat="server"
        style="color: #000066; font-family: Arial; position: relative; top: 0px; left: 51px;" Width="168px"
        ontextchanged="TextBoxName_TextChanged" ForeColor="#000066"></asp:TextBox>
        <br />
    <asp:Label ID="LabelCity" runat="server"
        style="font-family: Arial; position: relative; top: 2px; left: 0px; color: #000066; font-weight: 700" Width="50px"
        Text="City:" ForeColor="#000066"></asp:Label>
    <asp:TextBox ID="TextBoxCity" runat="server"
        style="color: #000066; font-family: Arial; position: relative; top: 2px; left: 51px;" Width="168px"
        ontextchanged="TextBoxCity_TextChanged" ForeColor="#000066"></asp:TextBox>
        <br />
</p>

This might be trivial to some, but I'm new at this and would like any help!
Thanks,
Cindy

Posted 8-Feb-12 13:33pm

Cindy MCS

Updated 8-Feb-12 13:40pm

walterhevedeich

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

walterhevedeich · Answer 1 · 2012-02-08T13:41:00

Solution 1

You can try using HTML Tables[^].

[Update]
Try removing align=center on your table and put this instead

CSS

style="margin: 0 auto;"

I have tested this and it works even when your table is inside a <p>

Posted 8-Feb-12 13:41pm

walterhevedeich

Updated 8-Feb-12 14:29pm

v2

Comments

Cindy MCS 8-Feb-12 20:00pm

I could use HTML tables, but you would think that a web developer tool kit would make it so much easier for a developer!!
I actually tried using a table, but it is not aligned in the center of the web page, it is aligned to the left of the web page.
Maybe I'm missing something!
Here's my code...
<table align=”center”>

<tr>

<td>

<asp:Label ID="LabelName" runat="server"

style="font-family: Arial; color: #000066; font-weight: 700"

Text="Name:">

</td>

<td>

<asp:TextBox ID="TextBoxName" runat="server"

style="color: #000066; font-family: Arial" Width="168px"

ontextchanged="TextBoxName_TextChanged">

<br />

</td>

</tr>

<tr>

<td>

<asp:Label ID="LabelCity" runat="server"

style="font-family: Arial; color: #000066; font-weight: 700"

Text="City:">

</td>

<td>

<asp:TextBox ID="TextBoxCity" runat="server"

style="color: #000066; font-family: Arial" Width="168px"

ontextchanged="TextBoxCity_TextChanged">

</td>

</tr>

</table>

Thanks for the help!

walterhevedeich 8-Feb-12 20:29pm

Check my updated answer.

Cindy MCS 8-Feb-12 20:59pm

I took my table out of the paragraph. I was just using the paragraph because I didn't want to deal with tables.
Both <table align=”center”> and <table style="margin: 0 auto;"> work!
I have tried in Firefox and IE!
Is there a difference between the two (align as opposed to style)?
Thanks for the input!

walterhevedeich 8-Feb-12 21:34pm

style is an attribute where you can inject inline CSS styles on your control. In that code, what we did was we inserted a CSS property called margin and set the top and bottom to zero, while setting the left and right to auto. What that basically means is that we leave the browser in charge to set the left and right margins for us.

Sergey Alexandrovich Kryukov 8-Feb-12 23:30pm

I voted 5 despite of the extensive, passionate, highly popularized and ideological struggle against using tables for alignment which is considered stylistic, not structural. I consider such idealism as based on mythical thinking and absolutization of internally pretty inconsistent HTML standard. Using tables for alignment is quite rational in my view, as alignment in such cases is a "hidden" form of table structure, so why not using tables explicitly, especially when the results are much more stable and maintainable the the alternatives?
--SA

walterhevedeich 8-Feb-12 23:53pm

Well, yeah. I have read from some articles that using tables can cause the page to load slowly. IMHO, it really depends on how we use them. Your comment have just made me more confident on my view. Thanks. :)

zyck · Answer 2 · 2012-02-08T18:11:00

HTML

try this code

you will see on this sample below on how you will use CSS 
Structured, Organize and Reusable