0

这应该是不费吹灰之力的，但我对一对 div 的 CSS 有一个小谜团。这是HTML：

<body>
<form id="form1" runat="server">
<div class="centered" id="selectReport">
    <asp:DropDownList ID="p0" runat="server"></asp:DropDownList>
    <asp:Button ID="viewReport" runat="server" Text="View Report" OnClick="ViewReport" />
</div>
<div>
    ...a centered table...
</div>
<div class="centered" id="buttons">
    <asp:Button runat="server" ID="saveEdits" Text="Save Edits" OnClick="SaveEdits_Click" />
    <asp:Button runat="server" ID="redoEdits" Text="Redo Edits" OnClick="RedoEdits_Click" />
</div>
</form>
</body>

如果我将此 CSS 放在同一个文件中：

<style>
    .centered
    {
        margin: auto;
    }
</style>

两个 div 都是左对齐的。

但是，如果我将此 CSS 放在单独的文件中：

.centered
{
    margin: auto;
}

第一个 div 左对齐，而第二个 div 居中。我还尝试为每个 div id 编写相同的 CSS 并获得相同的结果——第一个是左对齐的，而第二个是居中的。

这是屏幕截图：

在此处输入图像描述

这是呈现的 HTML：

<!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><title>
Network Operations Dashboard
</title>
<link href="NetworkOperations.css" rel="Stylesheet" type="text/css" /></head>

<body>
<h1 style="text-align: center; font-size: 30pt" >Network Operations Dashboard</h1>
<form method="post" action="NetworkOperationsReport.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTAyNTkyMjcyNw9kFgICAw9kFgQCAQ8QDxYGHgxBdXRvUG9zdEJhY2tnHg1EYXRhVGV4dEZpZWxkBQ9BcmNoaXZlRmlsZU5hbWUeC18hRGF0YUJvdW5kZ2QQFQYURGFzaGJvYXJkXzIwMTItTWF5LTEGVHJlbmRzBlN0eWxlcwdTY3JpcHRzCEFwcF9EYXRhB0FjY291bnQVBhREYXNoYm9hcmRfMjAxMi1NYXktMQZUcmVuZHMGU3R5bGVzB1NjcmlwdHMIQXBwX0RhdGEHQWNjb3VudBQrAwZnZ2dnZ2dkZAIFDxYCHgdWaXNpYmxlaGRkUrfXkiabK3mrjfzXNLtumhzsq/lXy+2nab/n0oCTc60=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebApp/WebResource.axd?d=J72WHhxz11o7F4T65-nk2s6O8A5yTLJdKan5j1GWRlsyEEDvOExumPz8U-TIG_EGGghKU7cpVHXCxLarpokjZhHzOtYqhdwyIhY1CB4wM9o1&amp;t=634746614287359483" type="text/javascript"></script>

<div class="aspNetHidden">

<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLY4tiyDgLwppLRBwKPpuCFAgLH2cPODQLV24ysCQLizdSlDwKFsO2xAgLfhdOhDAK46ZnWCAKVndrNAwK4r5OaCipKQs8Qpkd25hYiUSafRFyvUGzpZRXvRzfKNuVsC9Js" />
</div>
<div class="centered" id="selectReport">
    <select name="Archives" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;Archives\&#39;,\&#39;\&#39;)&#39;, 0)" id="Archives">
<option selected="selected" value="Dashboard_2012-May-1">Dashboard_2012-May-1</option>
<option value="Trends">Trends</option>
<option value="Styles">Styles</option>
<option value="Scripts">Scripts</option>
<option value="App_Data">App_Data</option>
<option value="Account">Account</option>

</select>
    <input type="submit" name="viewReport" value="View Report" id="viewReport" />
</div>

<div class="centered" id="buttons">
    <input type="submit" name="saveEdits" value="Save Edits" id="saveEdits" />
    <input type="submit" name="redoEdits" value="Redo Edits" id="redoEdits" />
</div>

我一定错过了明显的东西，但我很难过。任何建议表示赞赏。

问候。

4

3 回答 3

1

尝试给你的 div 一个固定的宽度并将它们居中：

.centered {
    margin: 0 auto;
    width: 60%; // or whatever you need.
}

要使 div 居中，您通常需要给它一个具体的宽度。

于 2012-07-02T23:09:52.347 回答
0

您的 div 可能已经居中（尽管如果您的 CSS 规则从字面上看是 just ，那么除非您在 div 上margin: auto指定 a ，否则它们不会做任何事情）。width问题是其中的控件（您的表单字段）不是。

尝试添加text-align: center;到您的.centeredCSS 规则。

请记住，输入元素是内联元素，这意味着它们会受到适用于文本的规则（如text-align、line-height等text-indent）的影响。

您可以通过使用一些开发人员工具来检查正在发生的事情，从而亲眼看到这一点。IE 有一些，Chrome 和 Safari 等 WebKit 浏览器有，Firefox 有，Opera 也有。有了它们，您可以（实时）了解您的 CSS 规则如何影响布局以及页面上元素的形状。

于 2012-07-03T00:32:04.663 回答
0

由 Kit Grose 的评论提供的答案：http: //jsfiddle.net/ZrdUY/1/。

于 2012-07-03T15:38:47.370 回答