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 は左揃えで、2 番目の 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

Kit Grose からのコメントによる回答: http://jsfiddle.net/ZrdUY/1/。

于 2012-07-03T15:38:47.370 に答える
0

div はおそらく既に中央に配置されています (ただし、CSS ルールが文字どおり単なるmargin: autoである場合、div で a を指定するまで何も実行されませんwidth)。問題は、その中のコントロール (フォーム フィールド) がそうではないことです。

CSS ルールに追加text-align: center;してみてください。.centered

入力要素はインライン要素であることを忘れないでください。つまり、テキストに適用される規則 ( 、text-alignなど) の影響を受けます。line-heighttext-indent

これは、いくつかの開発者ツールを使用して何が起こっているかを調べることで、自分で確認できます。IE にはいくつかあります。Chrome や Safari などの WebKit ブラウザにもあります。Firefox にもあります。Opera にもあります。それらを使用すると、CSS ルールがレイアウトにどのように影響し、ページ上の要素の形状にどのように影響するかを (リアルタイムで) 理解できます。

于 2012-07-03T00:32:04.663 に答える