How to center loginStatus login screen

Question

I am trying to center the login control that shows after selecting login using the loginstatus control.

<div id="linkContent">
    <asp:LoginStatus ID="LoginStatus2" runat="server" 
        LogoutAction="RedirectToLoginPage" />
</div>

I have tried a couple different methods that I found on google and none are working. I am using IE 9.

I tried:

#linkContent
{
text-align: center;
}

I have tried:

<div id="linkContent">
    <asp:LoginStatus ID="LoginStatus2" runat="server" 
        LogoutAction="RedirectToLoginPage" style="text-align: center;" />
</div>

and I tried:

#linkContent
{
margin-left:auto;
margin-right:auto;
}

I also pointed login to my own Login.aspx but it doesn't work either:

in webconfig:

<authentication mode="Forms" >
    <forms loginUrl="Login.aspx" />
</authentication>

None of these have worked. The login control stays left aligned. The loginStatus control is used within a master page.

Any help would be appreciated.

Thanks.

Answer 1

Using inline style (move it to your CSS file!) :

<div style="width: 500px; margin: 0 auto;">
    <asp:LoginStatus ID="LoginStatus2" runat="server" LogoutAction="RedirectToLoginPage" />
</div>

Change 500px to the width of your control.

Answer 2

You need to put margin-left: auto and margin-right: auto; on the markup that the LoginStatus control generates, not the containing element.

Assuming you have ClientIDMode="Static" in your web.config, and that the resulting HTML generated by the login static control will have an id of LoginStatus2, this will do the trick:

#LoginStatus2
{
    margin-left:auto;
    margin-right:auto;
}