0

まず、これが私が行った最初のASP.NETプロジェクトであると言わせてください。センタータグを使用して、すべてをdivに入れて中央に設定し、テーブルタグに自動マージンを設定してみましたが、何も機能していません。誰かが私をここで正しい方向に向けることができますか？

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Server.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <link
            href="~/Styles/Site.css"
            rel="stylesheet"
            type="text/css"
        />
        <asp:ContentPlaceHolder
            ID="HeadContent"
            runat="server">
        </asp:ContentPlaceHolder>
    </head>

<body>
    <table style="margin-right: auto; margin-left: auto;">
        <form id ="form1" runat ="server">
            <div class="page" 
                style="background-color: #000000; position: absolute; top: 10px; left: 160px; width: 1000px; height: 100px;">

                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Resources/image.png"
                        style="z-index: 1; left: 9px; top: 7px; position: absolute; height: 76px; width: 204px" />

                    <asp:Button ID="Button4" runat="server" BackColor="#333333" ForeColor="White" Height="23px" onclick="Button4_Click"
                        style="z-index: 1; left: 931px; top: 65px; position: absolute" Text="Login" Width="60px" />

                    <asp:Label ID="Label1" runat="server" Font-Underline="True" ForeColor="White"
                        style="z-index: 1; left: 727px; top: 67px; position: absolute; width: 193px; text-align: right">
                    </asp:Label>
            </div>

            <div 
                style="z-index: 1; left: 192px; top: 165px; position: absolute; height: 445px; width: 938px; color: #000000; background-color: #FFFFFF;">

                    <asp:ContentPlaceHolder
                        ID="MainContent"
                        runat="server">
                    </asp:ContentPlaceHolder>
            </div>

            <asp:Panel ID="Panel1" runat="server" BackColor="#003366"
                style="z-index: 1; left: 160px; top: 128px; position: absolute; height: 36px; width: 1002px">

                <asp:Button ID="Button5" runat="server" BackColor="#336699" BorderStyle="None" Height="23px" onclick="Button5_Click"
                    style="z-index: 1; left: 220px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Users" Width="60px" />

                <asp:Button ID="Button1" runat="server" BackColor="#336699"
                    style="z-index: 1; left: 10px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Home" BorderStyle="None" onclick="Button1_Click"/>

                <asp:Button ID="Button2" runat="server" BackColor="#336699"
                    style="z-index: 1; left: 80px; top: 7px; position: absolute; height: 23px; width: 60px" Text="About" BorderStyle="None" onclick="Button2_Click" />

                <asp:Button ID="Button3" runat="server" BackColor="#336699" BorderStyle="None" 
                    style="z-index: 1; left: 150px; top: 7px; position: absolute" Text="Profile" Height="23px" onclick="Button3_Click" Width="60px" />

                <asp:Button ID="Button6" runat="server" BackColor="#336699" BorderStyle="None" 
                    style="z-index: 1; left: 290px; top: 7px; position: absolute" Text="Servers" Height="23px" onclick="Button6_Click" Width="60px" />
            </asp:Panel>
        </form>
        <div style="z-index: 1; left: 160px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;">
        </div>

        <div style="z-index: 1; left: 1130px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;">
        </div>
    </table>
</body>
</html>

現在私は持って<table style="margin-right: auto; margin-left: auto;">いますが、うまくいかないようです。

4

1 に答える 1

2

divまず、属性を使用して絶対位置を設定しますclass="page"。divは常にtop:10px; left:160px;に配置されるため、これを削除してください。

実際、あなたにはたくさんの絶対的なポジショニングがあります-あなたは本当にそれを必要とせず、それを取り除くべきです。このページのデザインにVisualStudioなどを使用しましたか？一部のツールは、この追加のCSSを時々追加することで罪を犯します。

センタリングを実現したいときは、通常、定義された幅のDIVを使用します。次に、left属性とマージンを使用して、中央揃えのコンテンツをシミュレートできます。これは、さまざまなブラウザ、特に古いバージョンのInternetExplorerでも機能する傾向があります。

divを宣言する場合：

<div id="PageContainer">


</div>

次に、次のCSSを使用します。

#PageContainer{
    position:               absolute;
    float:                  left;
    left:                   50%; 
    top:                    20x;
    width:                  500px;
    margin:                 0px 0px 0px -250px; /* half of the width */
    background-color:       red;
}

次に、div内のコンテンツを中央に配置します。この手法を使用する場合は、幅を定義してからマージンを幅の半分に設定することが重要です。

こちらの実例をご覧ください。

Stack Overflowは、より新しいアプローチを使用しています。これはあなたが試みたアプローチですが、重要なのは、幅を定義する必要があるということです。StackOverflowのCSSを検査することにより（IE開発者ツールバーまたはfirebugなどを使用して）、ヘッダーdivタグのCSSを調べると、次のようになります。

#header{
    width:    960px;
    height:   120px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

つまり、awidthを設定margin-leftしてから、andtoを設定margin-rightするautoだけで十分です。

于 2012-04-14T21:16:35.240 に答える