Centering a Login Form 911! :(

[yshjagz]

ei guys, i have problems on centering a login form using css.

here’s my code for the html:

your text here..











Username








Password

and css:

.div_login {

width: 325px;

margin: 0 auto;

padding-top: 4em;

border: 1px solid yellow;

}



#login_form {

border: 1px solid white;



}

and how do you make it cross-compatible? if i open it in chrome, it looks okay but if switch to firefox, the design got whacked. :((

[SgtLegend]

Take a look at the following jsFiddle http://jsfiddle.net/chrisupjohn/hxAhH/, what i could gather from what you posted was you have no !DOCTYPE in your markup which causes a lot of cross browser compatibility issues.

You will also notice that i changed your classes to id’s are in my opinion its more efficient to use id’s where possible.

[yshjagz]

@SgtLegend: thanks, but i wanted the username and password form to be centered. i mean.. the left side should be adjusted to center the form.

[SgtLegend]

Here is the updated fiddle http://jsfiddle.net/chrisupjohn/hxAhH/28/

[yshjagz]

@SgtLegend: i tried it.. but the input fields and the login button won’t center. :( i tried the

text-align: center

but still it won’t work.

[yshjagz]

*center

[SgtLegend]

Could you please post the code you currently have as i suspect you either have a float or dedicated flow pattern that’s overwriting the text aligned property.

[Author]

Posts