我有以下代码:
<%@ 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>
这是css:
.centerBlock
{
margin-left:auto;
margin-right:auto;
width:50%;
}
我想要做的只是简单地将它居中......现在水平放置,但垂直方向也很好,所以它在页面中间轻拍。
我知道引用外部样式表不是问题,因为最后一行的CssClass =“error”工作正常。根据{{3}},我也尝试了<div style="margin-left:auto;margin-right:auto;">
,但似乎没有任何效果。输出当前是左对齐的,而不是居中的。我正在使用IE 7。
答案 0 :(得分:4)
如果您希望它完全位于页面中间,请尝试以下操作:
.centerBlock {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
height: 200px;
margin: -100px 0 0 -25%;
}
请参阅此jsFiddle demo。
您显然需要相应地调整高度和上边距。
答案 1 :(得分:1)
自动边距仅在标准模式下在Internet Explorer中有效。在怪癖模式下,它将模拟IE 5并且不支持它们。
添加将触发标准模式的Doctype。 e.g。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或
<!DOCTYPE html>
答案 2 :(得分:0)
事实证明,简单地刷新浏览器似乎解决了我的问题。我注意到,当我更新我的CSS时,它没有确认Web浏览器中更改的值 - 当我做右键单击&gt;在Chrome中检查元素,即使停止调试,停止服务器或退出并重新打开Visual Studio,它仍会显示旧值。
我进行了搜索并遇到this helpful post,这让我知道问题在于浏览器。