How to center div element in ASP.NET?

Question

I've got the following code:

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/TomsStyleSheet.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="centerBlock">
        <asp:GridView ID="GridView1" runat="server" CcsClass="center">
        </asp:GridView>
    </div>
    <br />
    <div class="centerBlock">
        <asp:Label ID="Label1" runat="server" Text="Enter Directory Path: "></asp:Label>
        <asp:TextBox ID="TextBox" Width="200px" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="checksumBtn" runat="server" Text="Calculate Checksum" OnClick="CalculateChecksum" />
        <br />
        <asp:Label ID="errorMsg" runat="server" Text="" CssClass="error"></asp:Label>
    </div>
    </form>
</body>
</html>

Here's the css:

.centerBlock
{
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

What I'm trying to do is simply center it... horizontally for now but vertically would also be good so it's smack dab in the middle of the page.

I know that it's not a problem of referencing the external style sheet because CssClass="error" on the last line works fine. I've also tried <div style="margin-left:auto;margin-right:auto;"> as according to this suggestion but nothing seems to work. The output is currently left-justified, not centered. I'm using IE 7.

score 4 · Answer 1 · answered Feb 11 '13 at 15:29

4

If you want it to be exactly in the middle of the page, try this:

.centerBlock {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 200px;
    margin: -100px 0 0 -25%;
}

See this jsFiddle demo.

You will obviously need to adjust the height and top margin accordingly.

answered Feb 11 '13 at 15:29

BenM

52,573
26
113
168

this isn't working for me either. Tried switching to Chrome too and still doesn't work – user1985189 Feb 11 '13 at 15:38
1

Are the styles being applied? You can check in Chrome's Element Inspector. – BenM Feb 11 '13 at 15:39
it doesn't look like it... when i select that div, under "Styles > Matched CSS Rules" it shows this: div { display: block; }, but for my other error class (which is working) it displays the proper css – user1985189 Feb 11 '13 at 15:49
1

Then the CSS styles aren't being applied. – BenM Feb 11 '13 at 15:53
but why? I edited the post to show all my entire aspx page. Maybe the problem is somewhere in there? – user1985189 Feb 11 '13 at 16:08
Without seeing a demo link, it's hard to diagnose. Have a peek around in Chrome Developer Tools, they include a Resources tab that should tell you what's loaded, and what's not. – BenM Feb 11 '13 at 16:11
thanks, after refreshing the browser, your solution works now. – user1985189 Feb 11 '13 at 16:53

score 1 · Answer 2 · answered Feb 11 '13 at 15:36

1

Auto-margins only work in Internet Explorer when it is in standards mode. In quirks mode it will emulate IE 5 and not support them.

Add a Doctype that will trigger standards mode. e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html>

How to center div element in ASP.NET?

3 Answers3