Oooh! Pretty centered login control...
Oddly enough, the ASP.Net Login control is a pesky bugger to center on a page. I’m sure you’ve tried doing the “double wrapper” div tags, and I even use a similar trick when [centering tables] on a given page, but to no avail. After some digging and tweaking, I’ve found the solution and here it is:
The thing to remember is that by default the box model for the div is going to expand the entire width of the section you’re working with, so trying to center that is pointless. Instead you need to set your box width to the proper fixed width and then set your margins to auto.
You do need some kind of “wrapper” setting the text-align: center to establish things, and you can even do that in your body tag on the page. For the sake of example here, I’ll do all stylesheets inline, but you can always create classes. Here’s the finished product:
<div style="text-align: center;">
<div style="width: 400px; margin-left: auto; margin-right:auto;">
<asp:Login ID="AppLogin" runat="server"
DestinationPageUrl="~/Default.aspx"
TitleText="Please enter your credentials to access this application.">
</asp:Login>
</div>
</div>
And there you go! Feel free to tweak our your login control formatting, but this should keep the control itself centered nicely on your page. This works in IE8 (without having to run compatibility mode), Chrome, Firefox, and Safari.
Enjoy!
thanx soooooooooooooooo much!!!!!!!!!!! helped me a lot (even though its such a simple solution, i couldnt find an answer and here it is!) :D
thanx a mil!
Happy to have helped! It’s amazing at how sometimes the simple things are hardest to find.
just put style=”width:…………….” in the section
But thanks, just spend 2hrs researching and trying till I found this post and now I’m happy
sorry, in the section for the login control
Excellent! Glad I could help!
Just tried this with IE8 with limited success….the inner div is centred but the login control within this always aligns left no matter what. It renders fine in compatibilty mode however so I’m guessing maybe a subtle problem to do with the .net framework version or exact IE8 version used – in my case it is a VS2008 web site project targetting .net 3.5. Browser is IE version 8.0.6001.18702 – would be good to know what your test was run against as this might explain the difference – cheers.
Greetings! My initial tests were done with Chrome and Firefox I believe. At the time we were using IE7, which may have been why IE8 in non-compatability mode has issues.
Regardless, I should work on getting this updated for more modern browsers. 8^D