HI GUYS.Am trainning to center my form in the middle of my html page but I have failed.Can any one help? Below is my code.........
<html>
<head>
<title>
Rich Trials
</title>
</head>
<body>
<form name="">
username:
<input type="text" name="username" />
<br />
password:
<input type="password" name="password" />
<br /><p>
<input type="SUBMIT" value="LOGIN" />
</form>
</body>
</html>
Thanks in advance......
To make it center in Firefox/Chrome/Safari, use a wrapper. Wrap the Form in a div section as follows (set the width to whatever you want):
<div style="margin:0 auto;width:75%;text-align:left">For IE, you will need to apply a style to the body as follows:
<body style="text-align:center">Generally, it is better to put the styles in a CSS stylesheet, but the examples above will work fine if you are not familiar with CSS.
set a dtd and complete the necessary <head> details so that css will work
just <html> is html1.1 with no style support,
then play with andrews (functional) code
<html>
<head>
<title>
Rich Trials
</title>
</head>
<body>
<center>
<div style="text-align:left;">
<form name="">
username:
<input type="text" name="username" />
<br />
password:
<input type="password" name="password" />
<br /><p>
<input type="SUBMIT" value="LOGIN" />
</form>
</div>
</center>
</body>
</html><center>?? Inline styling?? This is 2010.
@kizito:
Your html is all to hell - no closing tags, no labels for your form fields. Put it through an xhtml validator and follow the advice. THEN tackle the styling/css - it'll be much easier once your markup is working. Place your style rules into an external css file.
ardav, i don't see kitso asking for xhtml anywhere.
Inline styling is the best way to demonstrate how to get it to work based on the simplicity of the initial code.
<center> is old hat but it is still html 4.1 and interpreted by all browsers in the same way.
Thanks for the advice on which year it is.
Thanks for the advice on which year it is.
Pleasure :icon_cheesygrin:
I know w3schools ain't the b-all-and-end-all, but:
The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided!
As for html vs. xhtml - yeah OK, but this is useful:
hmm, praps it's time i upgraded from netscape 0.9
:D
The correct answer is to make your wrapper div, give it a width, and set margin:auto. The bit about text-align is an old technique used when you work with ie6, and then it requires more code to overcome the text being aligned centre. Also only about 10% of users are still on IE6, so don't worry too much about them with this particular bit of code, to be honest.
also the advice given was incomplete anyway. you should have set text-align:center for the BODY, then text-align:left for the wrapper div to get this to work in ie6 (all other browsers understand margin:center.
BUT you must use a doctype. Google on it an duse html 4.01 strict or at worst html4.01 loose. Without a doc type, IE will be in quirks mode and screw up your layout.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.