CODEWITHSUNDEEP
htmlcss
user1985189
user1985189

Reputation: 669

How to center div element in ASP.NET?

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.

Upvotes: 2

Views: 20540

Answers (3)

user1985189
user1985189

Reputation: 669

As it turns out, simply refreshing the browser seemed to solve my problem. I noticed that when I updated my CSS, it wasn't acknowledging the changed values in the web browser - when I did Right-Click > Inspect Element in Chrome, it still showed the old values, even after stopping debugging, stopping the server, or quitting and reopening Visual Studio.

I did a search and came across this helpful post which let me know that the problem lay with the browser.

Upvotes: 0

Quentin
Quentin

Reputation: 943157

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>

See also Wikipedia: Quirks mode

Upvotes: 1

BenM
BenM

Reputation: 53198

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.

Upvotes: 4

Related Questions